我已经使用样式制作了一个水平导航栏,但是我遇到了一个主要问题......自<li>
是 block 元素,我无法使用 text-align:right
对齐它,这让我无法正确对齐它。我试过使用 display:inline;
list-item 元素的语法,但这也没有任何区别(实际上是有道理的)。
我的问题是,有没有办法水平对齐 <li>
, 而不必使用 float:right;
?我希望它适合当前列表的格式(我已经调整以适合父 div),并且使用 float 并不是一个好的或安全的方法。 Here's到目前为止我得到的屏幕截图(由于最近添加了图像,布局略有困惑)。如您所见,我已经设法正确放置了“我的页面”和“注销”,但是一旦我添加了一些更“复杂”的东西(比如“+”,它现在被放置在普通列表中) ,它搞砸了……我真的不明白其他网站是如何做到这一点的。
最佳答案
您必须定义 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;
}
如果愿意,您可以将菜单分成左右两部分。根据需要添加或删除填充和边距
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;
}
关于html - 比 float :right in navigation bar? 更好的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19527474/