html - 跨度溢出 : hidden; doesn't show up in 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;
}

将解决您的问题。