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 /

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

2 个答案: