Html 在Chrome/Safari中，li导航栏中有两行文字，但在Firefox中只有一行文字

我不知道为什么，但超过一定的字体大小后，导航栏中的文本会显示在两行上。由于某些原因，Chrome和Safari没有更新框大小，但在Firefox中仍然可以正常工作

这些web浏览器对我的代码有什么影响

<nav id="topTab">
    <a href="#" id="mobNav"></a>
      <ul>
          <li><a href="http://www.example.org/" title="morning delight">page1</a></li>
          <li><a href="http://www.example.org/" title="yesterday">page2</a></li>
          <li><a href="http://www.example.org/" title="accelaaaa">page3</a></li>
      </ul>

  <div>
      <h1>
      <b href="http://localhost:8000/home.html" title="Home">Example1</b></h1> 
  </div>

</nav>

---

您的无序列表是浮动的。浮动元素会将其从文档的“自然”流中移除，因此，您的文本正试图适应这种“非自然”流

您必须清除浮动才能再次恢复流。这可以通过添加一个附加了

clear:both

样式的元素来实现。在本例中，您需要将clear-tware添加到包装标题标记的div中

div {clear: both}

---

谢谢这是一个巨大的帮助。你知道为什么我的导航文本仍然是两行而不是一行吗？我不太清楚你说的导航文本是什么意思。在Chrome v56和Firefox v52中，您的菜单链接（无序列表项）显示在一行中。由于我上面解释的原因，示例文本在第3页链接下面的某个地方被压扁。是否尝试在菜单旁边显示示例文本？也许你可以发布一张图片，它应该是什么样子，这样我就可以更好地了解你想要实现什么？我在上面包括了两张图片。无论出于什么原因，这个框都与文本不符。哦，我明白了。您的原始代码有一个单词链接，因此您的问题不可见。如果我在链接中添加多个单词，它们会自动换行。问题似乎来自于使用百分比值填充。如果使用百分比值填充，Chrome会出于某种原因自动启用换行。您可以通过在

nav#topTab ul li a

选择器下添加

空白：nowrap

属性来强制禁用换行。它仍然不是完美的，但那是因为您的代码还有其他问题。下面是一个工作菜单的示例：它回答了我的许多问题。我还有一个给你。为什么你的代码在导航栏上居中？只是导航标记中的文本对齐吗？

div {clear: both}