在右对齐导航菜单中将第一个元素对齐到左侧

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/