右揃えのナビゲーションメニューで最初の要素を左に整列する

Question

以下に示すように、並べ替えられていないリスト項目がほとんどないメニューがあります。

今、私は、左右側のアイテムの残りの部分に配置するホームメニューを必要としています。 どうすればいいですか？ここに私のメニューのCSSは次のとおりです。

.menu{ 
    position: absolute; 
    top:10px; 
    left:315px; 
    width:920px; 
    border: 1px solid #d6d6d6; 
    background: #fff; 
    padding: 15px; 
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
    border-radius : 7px; 
    -moz-border-radius : 7px; 
    -webkit-border-radius : 7px; 
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); 
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); 
    height: 18px; 
} 
.dark { 
    background : rgb(89,89,89); 
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); 
    background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); 
    border: 1px solid #272727; 
} 
a { 
    text-decoration: none; 
    color: #262626; 
    line-height: 20px; 
} 
ul { 
    margin: 0; 
    padding: 0; 
    z-index: 300; 
    position: absolute; 
} 
ul li { 
    list-style: none; 
    float:left; 
    text-align: center; 
} 
ul li a { 
    padding: 0 20px; 
    text-align: center; 
} 

これは私のマークアップがどのようにある：

<div class="menu dark"> 
<ul > 
     <li><a href="">Home</a></li> 
     <li><a href="">Item1</a></li> 
     <li><a href="">Item2</a></li> 
     <li><a href="">Item3</a></li> 
     <li><a href="">Item4</a></li> 
     <li><a href="">Item5</a></li> 
    </ul> 
</div> 

Answer 1

は完全にあなたのスクリーンショットを再現するCSS十分ではありませんでしたが、基本的な式は次のようなものでなければなりません。

.menu ul { 
    text-align:right; 
} 
.menu li { 
    display:inline-block; 
} 
.menu li:first-child { 
    float:left; 
} 

デモ：http://jsfiddle.net/TLS3Y/

あなたはで何かを行うことができますdisplay:inline-block;の代わりにが表示されますが、メニュー項目の順序は逆になります。

は

.menu { 
    position:relative; /* contain absolutely positioned elements */ 
} 
.menu ul { 
    float:right; 
} 
.menu li { 
    float:left; 
} 
.menu li:first-child { 
    position:absolute; 
    left:15px; /* Match your padding on <ul> */ 
    top:15px; 
} 

デモ：：http://jsfiddle.net/TLS3Y/3/迅速な返信用Madmartiganのおかげで@