在右對齊的導航菜單中左對齊第一個元素

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/

你可以做一些與.menu li { float:right; }而不是display:inline-block;，但是菜單項的順序會顛倒過來。

還有另外一種方式，你可以做到這一點，可能實際上是更紮實一點，因爲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/