跨度溢出：隐藏;没有出现在Firefox中

Question

出于某种原因，它漂浮在它应该实际存在的地方之下。

Firefox上的示例：

Chrome上的示例：

• 演示：http://jvnknvlgl.github.io/oxygen-template
• 来源：http://github.com/jvnknvlgl/oxygen-template

HTML：

<nav>
  <span><a class="main-current" href="index.html">Home</a></span>
  <span><a class="main" href="page-1/sub-1.html">Subpages</a></span>
  <span><a class="main" href="page-2.html">Multi-column</a></span>

  <! The span it's about >
  <span class="credits"><a class="credits" target="_blank" href="http://github.com/jvnknvlgl/oxygen-template">Oxygen by jvnknvlgl</a></span>

</nav>

CSS：

span {
  line-height: 56px;
  padding-left: 4px;
  padding-right: 10px;
}

span.credits {
  float: right;
  overflow: hidden;
  padding-left: 30px;
  padding-right: 4px;
}

nav {
  max-width: 800px;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: auto;
  margin-right: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

提前感谢任何可以提供帮助的人！

Answer 1

只需删除

nav {
    white-space: nowrap;
}

将解决您的问题。

Answer 2

nav {
    white-space: normal;
}

然后有一个媒体查询，当你的导航链接开始消失并恢复到：

@media (max-width: 400px) {
    nav {
        white-space: nowrap;
    }
 }

Answer 3

删除

nav {
    white-space: nowrap;
}