html - 比 float :right in navigation bar? 更好的方法

Question

我已经使用样式制作了一个水平导航栏，但是我遇到了一个主要问题......自<li>是 block 元素，我无法使用 text-align:right 对齐它，这让我无法正确对齐它。我试过使用 display:inline; list-item 元素的语法，但这也没有任何区别(实际上是有道理的)。

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

Answer 1

您必须定义 text-align: right对于 containing 元素

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