javascript - 导航栏在不应该的时候换行

Question

我制作了一个宽度为 1000 像素的导航栏，其中包含 4 个 250 像素宽的链接。我还将所有元素的填充和边距设置为 0。但是由于某种原因，元素仍然换行到另一行，当我将宽度降低到 247px 或更小时，它们都显示在同一行上，但它们换行 248 或更多.这是我的 CSS:

*
{
    margin: 0;
    padding: 0;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.container
{
    border: 1px solid;
    margin-left: auto;
    margin-right: auto;
    width: 1000px;

    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.menu-container
{
    min-height:60px;
}

nav a, a:link, a:visited
{
    color: #000000;
    display: inline-block;
    font-size: 60px;
    line-height: 60px;
    text-decoration: none;
    width: ###px;
    text-align: center;
}

nav a:hover
{
    background-color: #000000;
    color: #FFFFFF;
}

当### 小于等于 247 时，它们都显示在一行中，当它大于等于 248 时，它们换行。

这是我的 html:

<div class="container">
  <div class="menu-container">
    <nav>
      <a href="/">Home</a>
      <a href="/games">Games</a>
      <a href="/tags">Tags</a>
      <a href="/scores">Scores</a>
    </nav>
  </div>
</div>

我真的希望它们每个都是 250 像素宽，以便它们占据导航栏的整个宽度(将它们设置为 247 像素不会占据整个导航栏)但我不希望它们换行。有谁知道问题出在哪里？

Answer 1

当使用 inline-block 时，将考虑空格

<div class="container">
  <div class="menu-container">
    <nav>
      <a href="/">Home</a><!-- white space here -->
      <a href="/games">Games</a><!-- white space here -->
      <a href="/tags">Tags</a><!-- white space here -->
      <a href="/scores">Scores</a><!-- white space here -->
    </nav>
  </div>
</div>

一个简单的修复方法是

<nav>
  <a href="/">Home</a><a href="/games">Games</a><a href="/tags">Tags</a><a href="/scores">Scores</a>
</nav>

您也可以考虑改进您的 HTML。当您尝试显示用于导航的链接列表时，请考虑使用 ul 和 li

更新

部分典型案例

Apple

ul {
display: table;
width: 845px;
table-layout: fixed;
}

li {
display: table-cell;
width: 100%;
overflow: hidden;
}

a{
display;block
}

Yahoo

ul{
white-space: nowrap;
overflow: hidden;
}
li {
display: inline-block;
}