0

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

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

4

2 回答 2

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

于 2013-10-22T20:23:07.720 回答
0

给你，我认为这就是你要找的：

jsfiddle.net/Sdw5h/

于 2013-10-22T20:29:12.810 回答