将无序列表的一部分向左浮动，一部分向右浮动在同一行上答案

【问题标题】：Floating part of Unordered List Left and part of it Right on the Same Line将无序列表的一部分向左浮动，一部分向右浮动在同一行上
【发布时间】：2013-04-15 06:51:09
【问题描述】：

我知道在 here 和 here 之前有人问过这个问题，但我无法将他们的解决方案应用于我的具体问题。

我有一个像这样的无序列表：

http://tinker.io/926d2/5

<nav>
    <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    /ul>
</nav>

但最后一个子元素必须向左浮动，其他元素向右浮动。

请注意，我想避免在任何列表元素周围添加类或 html，因为它们是由 PHP 在一个变量中生成的。但是，向 nav 和 ul 标签添加类是可以的。

到目前为止，我想出的是以下 css：

nav li {
    display: inline;
    list-style: none;
    text-align: right;
}

nav li:last-child {
    text-align: left;
}

但是，前四个元素“阻止”了最后一个子元素向左对齐。

我尝试过浮动，并将前四个元素绝对定位，但似乎无法弄清楚。

任何想法将不胜感激！

【问题讨论】：

我错过了什么吗？只需将text-align: left 更改为float: left 即nav li:last-child { float: left;}。在演示中运行良好：tinker.io/926d2/7
这个？ tinker.io/926d2/8
如果 a、b、c 和 d 都在页面的右侧，那么两者都是完美的。
有点像这样：tinker.io/926d2/9 除了没有 a、b、c 和 d 元素的相反顺序

标签： html css

【解决方案1】：

http://jsfiddle.net/T5xc9/ 看到这个小提琴。它使用text-align 和float 来实现你想要的并且不使用绝对位置。一切都是relative

【讨论】：

【解决方案2】：

这有帮助吗？我没有使用类，只使用定位。 http://tinker.io/926d2/16

【讨论】：

哇！您先生完成了我开始认为不可能完成的任务！
很抱歉，Ejay 可能有更好的解决方案，它不使用绝对定位。尽管如此，我还是非常感谢您的回答！