将几个 <li> 之一向右对齐？答案

【问题标题】：Align one of several <li> to the right?将几个 <li> 之一向右对齐？
【发布时间】：2014-09-17 06:53:38
【问题描述】：

    <div id="menu">
<ul><li><a href="#" class="current">SocialSpot</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Latest</a></li>
<li><a href="#">Settings</a></li>
<li>Logout</li>
    </div>
    </ul>

我在网页中有这个。我有 css 对齐它们。但是我希望注销按钮向右对齐但在同一个栏上。如果不将它们全部对齐，我该如何做到这一点？

【问题讨论】：

“对齐”是什么意思？您是否将它们全部水平显示？
您可以在该 li 中添加一个类并为该类创建一个 css 规则。
我正在横向使用它们。
创建jsFiddle 示例将大大增加您获得好答案的机会。

标签： javascript html css

【解决方案1】：

CSS：

ul { overflow:auto; }
li { float:left; }
li:last-child { float:right; }

现场演示： http://jsfiddle.net/simevidas/Rs4Sa/

顺便说一句，:last-child 伪类在 IE8（及更低版本）中不起作用。如果您希望它在这些浏览器中工作，您必须为 Logout LI 项分配一个类（例如 right），然后：

li.right { float:right; }

现场演示： http://jsfiddle.net/simevidas/Rs4Sa/1/

【讨论】：

【解决方案2】：

您可能希望在 css 上使用float: right 以作为注销链接。

【讨论】：

【解决方案3】：

像这样？ http://jsfiddle.net/QAjkP/

您可以使用 id 标记为 <li> 项目指定 css 属性

【讨论】：