html - 无序列表左浮动部分和右浮动部分在同一行

标签 html css

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

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

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;
}

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

我试过 float ,并绝对定位前四个元素,但似乎无法弄清楚。

任何想法将不胜感激!

最佳答案

http://jsfiddle.net/T5xc9/看到这个 fiddle 。它使用 text-alignfloat 来实现您想要的并且不使用绝对位置。一切都是相对的

关于html - 无序列表左浮动部分和右浮动部分在同一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16005008/

相关文章:

html - 使用 CSS 的样式问题

html - 如何使用 Bootstrap 垂直对齐到中间?

javascript - AngularJS,ng-repeat with ng-include 不呈现

php - 在 php 中获取 Bootstrap 下拉列表的值

html - 元素聚焦时如何防止悬停样式

javascript - 为什么我无法获取输入类型=文本的内容?

css - 水平对齐 img 和文本?

html - 在响应式设计方面,您如何处理高分辨率手机,例如 Galaxy S4?

css - 有没有办法在 Visual Studio 中查看 sass 文件的行号?

html - CSS、HTML : What's the best way to add space to the inside of a scrollable element?