比浮动更好的方法：在导航栏中？

Question

我已经使用样式做了一个水平导航栏，但是我遇到了一个大问题...由于<li>是块元素，我无法使用text-align:right对齐它，这导致我无法对齐它正确。我已经尝试对 list-item 元素使用 display:inline; 语法，但这也没有任何区别（这实际上是有道理的）。

我的问题是，有没有什么方法可以水平对齐<li>，而不必使用float:right;？我希望它适合当前列表的格式（我已经调整它以适合父 div），并且使用 float 并不是一个好的或安全的方法。 Here's 到目前为止我得到的截图（由于最近添加了图像，布局有些混乱）。正如你所看到的，我已经设法正确放置了“我的页面”和“注销”，但是一旦我添加了一些更“复杂”的东西（比如“+”，它现在被放置在普通列表中） ，搞砸了……我真的不明白其他网站是如何做到这一点的。

Answer 1

你必须为包含元素定义text-align: right

HTML：

<ul class="nav">
    <li class="menu">1</li>
    <li class="menu">2</li>
    <li class="menu">3</li>
    <li class="menu">4</li>
    <li class="menu">5</li>
</ul>

CSS：

.nav {
    text-align: right;
}

.menu {
    display: inline;
}

JSFiddle

如果您愿意，您可以将菜单分成左右两部分。根据需要添加或删除填充和边距

HTML：

<ul class="nav left-nav">
    <li class="menu">1</li>
    <li class="menu">2</li>
    <li class="menu">3</li>
</ul>
<ul class="nav right-nav">
    <li class="menu">4</li>
    <li class="menu">5</li>
</ul>

CSS：

.nav {
    margin: 0;
    padding: 0;
}

.left-nav {
    text-align: left;
}

.right-nav {
    text-align: right;
}

.menu {
    display: inline;
}

JSFiddle

Answer 2

给你，我想这就是你要找的：

jsfiddle.net/Sdw5h/