Html CSS<；UL>；在Firefox中未正确渲染

我有一个无序的列表作为我网站的导航栏。在我的Mac上，它在Safari、Chrome和Opera中看起来很棒。然而，在Windows IE和Firefox（任何一种平台）中，它都会将所有应该放在一行中的项目下推到第二行。有什么办法可以帮上忙吗？也许是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>

---

您可以尝试将li用作块元素并使其浮动：

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

编辑： elcanrs正确地指出，浮动元素会自动变成块元素，因此

显示：块在我的代码示例中仅用于说明

发件人：

元素生成一个浮动到左侧的块框。内容
在方框右侧流动，从顶部开始（取决于
“清除”属性）

您忘记了
显示：块和
列表样式：对于
标记，无

尝试使用以下方法：

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

它应该会起作用。我在我的CMS上使用这个CSS菜单…
您已经回答了自己的问题。当内容太宽时，它将换行。定义字体/大小、使用较小的字体大小和/或调整元素的宽度。您的Firefox版本是什么？我试了10.0，成功了。尝试设置字体大小或重置一些值。Dan Cederholm最近刚刚发布了此消息。如果你想做一个链接或按钮的水平列表，请查看他的新设计模式网站：。特别是或。看起来你可能正在尝试做类似的事情。我建议浮动LI's，这样你可以更有效地应用边距/填充/宽度。Fozzyuw，我目前正在尝试你推荐的pea.rs的导航栏。只是想弄清楚在当前页面上指示活动链接的方法，等等。看起来到目前为止它是有效的。一旦我激活了它，我会再次发布。好吧，我把pea.rs的东西放进了我的网站，我更喜欢导航栏。我唯一的问题是，我无法使导航栏在页面上居中，除非将边距设置为左侧（25%），这是我能够使导航栏居中的最大距离。这是我的网页链接，如果你想看的话。这是一个非常简单的页面-我是一个音乐家，正在做自己的网站<代码>显示：块
在您浮动
和元素时暗示。hmmm。。。一直以来，我都没有意识到浮力是块级的。但这是有道理的。@elclanrs这是绝对错误的。显示：浮动元素时不一定隐含块#navbar li{}可以包含display:inline，这将使li元素内联，并且仍然是浮动的。默认情况下，是的，LI是块级元素，但它们在浮动时不采用display:block属性。当您浮动一个内联元素时，即
等，它将变成
显示：block
…我编辑我的帖子以反映您的输入-我自己不知道，尽管如此，它还是通过显式地将display设置为block来说明隐含的行为。谢谢弗雷德里克。我接受了Fozzy的建议，将导航栏稍微调高了一点，使用了pea.rs中的水平链接，看起来不错。如果你想看看我做了什么，我的网站很简单：你可以看到我用来自全世界的css片段创建自己网站的拙劣尝试。。。
#navbar
{
width: 600px;
float: left;
list-style: none;
padding:0px;
height:20px
}