html - 列表导航——左右对齐

Question

这是一个示例标记:

<ul id="subnav" class="right">
    <li><a href="#">Email</a></li>
    <li><a href="#">Note</a></li>
    <li><a href="#">Test</a></li>
</ul>

如何让“测试”与子导航右侧对齐，而其余元素与左侧对齐？我是否需要另一个 UL 并将其右对齐并在其中进行测试，或者我只是将测试 li 右对齐？

这是一个演示:http://jsfiddle.net/RbHN5/2/

如果有人能告诉我正确的实现方式，我将不胜感激

Answer 1

您可以使用 float: right 将 last-child 单独右对齐。

#subnav li:last-child{
    float: right;
    margin-right: 40px; /* Optional setting dependent on other styles */
}

Demo

注意:这仅在相关元素是last-child 时有效。如果有多个元素，则可以使用相同的 float 设置，但使用类作为选择器(如 .right)而不是 last-child。

Updated Demo - 使用 right 类的多个右对齐元素。