html - 右对齐列表项

Question

这可能是一个简单的问题，但我很挣扎。我认为这与 float 有关，但我很困惑是否可以清除 float 或左对齐剩余的元素。

如何让“登录”列表项位于右侧，而其他所有内容位于左侧？

这是我的代码:http://jsfiddle.net/spadez/kYfNB/21/

我的 html 在这里:

<div id="container">
    <div id="header" class="inner">
        <h1><a href="index.html">Admin</a></h1>
        <ul>
            <li><a href="jobs.html">Item</a></li>
            <li><a href="sites.html">Item</a></li>
            <li><a href="feeds.html">Item</a></li>
            <li><a href="feeds.html">Login</a></li>
        </ul>
    </div>
</div>
<div id="content" class="inner">
     <h1>Add</h1>
</div>

Answer 1

由于登录是最后一项，因此您可以使用 :last-child将最后一个 li 元素向右浮动。

UPDATED EXAMPLE

#header ul li:last-child {
    float: right;
}

但是，这需要您删除 #header ul 上的 float 。变化:

#header h1, #header ul, #header ul li {
    float:left;
}

至:

#header h1, #header ul li {
    float:left;
}