Question

我有一个无序列表作为我网站的导航栏。它在Mac上的Safari，Chrome和Opera中看起来很棒。但是，在Windows IE和Firefox（任一平台）中，它将所有项目都放在一行中并将其中的1或2个推送到第二行。关于如何帮助这个的任何想法？也许它是IE或Firefox中使用的字体大小，而不是Safari和Opera？

这是HTML：

<ul id="navbar">
<li class="home"><a href="index.html">Home</a></li>
<li class="pictures"><a href="pics.html">Pictures</a></li>
<li class="bio"><a href="bio.html">Biography</a></li>
<li class="media"><a href="media.html">Media</a></li>
<li class="performances"><a href="performances.html">Performances</a></li></ul>

CSS：

#navbar
{
width: 600px;
margin-left: auto;
margin-right: auto;
padding:0px;
height:20px

}
#navbar li {
width: 120px;
list-style:none;
display:inline;
text-align: center;
}
#navbar a
{
width: 120px;
float: left;
}

Answer 1

你可以尝试使用li作为块元素并浮动它们：

#navbar li {
width: 120px;
display: block;
float:left;
text-align: center;
}

编辑： elcanrs正确地指出浮动元素会自动变成块元素，因此我的代码示例中的display: block;仅用于说明。

来自http://www.w3.org/TR/CSS2/visuren.html#float-position：

该元素生成一个浮动到左侧的块框。内容流向盒子的右侧，从顶部开始（受制于 '清晰'属性）。

Answer 2

您忘记了display: block;代码的list-style: none和<ul>！

尝试使用：

#navbar
{
width: 600px;
float: left;
list-style: none;
padding:0px;
height:20px
}

它应该工作。我在CMS上的CSS菜单中使用它...

CSS <ul>无法在Firefox中正确呈现</ul>

2 个答案: