html - CSS - 导航不合适

Question

我做了一些更改以向我的导航添加一个额外的链接，但它不是内联的，如下所示，您可以看到“Credit”被推送到下一行。我尝试在 css 中更改位置或显示，但仍然没有任何反应。

#nav {
  list-style: none;
}
#nav ul {
  margin: 0;
  padding: 0;
  width: 0;
  display: none;
}
#nav li {
  font-size: 24px;
  float: left;
  position: relative;
  display: block;
  width: 280px;
  height: 50px;
}

<nav id="navigation">
  <ul id="nav">
    <li><a href="index.php">Home</a></li>
    <li><a href="DisplayCD.php">Browse CD</a></li>
    <li><a href="SearchCD.php"> Search</a></li>
    <li><a href="OrderCDsForm.php"> Order</a></li>
    <li><a href="Credit.php">Credit</a></li>
  </ul>
</nav>

Answer 1

我认为这是因为宽度。在您的例子中，每个 li 元素都是一个宽度为 280px 的 block 。280*4 =1120px - li 元素的总宽度，不包括'Credits'。

大多数用户现在使用设置为 1024 x 768 或更大分辨率的浏览器上网。但是，如果低于此值，“致谢名单”将转到下一行。你也会这样!因此，请尝试减小总宽度，并始终尝试将其保持在最大值 1000 或以下。