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>

- Doran L

---

尝试减小宽度！ - Mathews Mathai

Answer 1

我认为这是由于宽度的原因。 在您的情况下，每个li元素都是280像素宽的块。 280 * 4 = 1120像素 - 排除“Credits”的li元素的总宽度。

现在大多数用户使用设置为1024 x 768或更大的浏览器浏览。但是，如果低于此值，“Credits”将移到下一行。这也适用于您！因此，请尝试减少总宽度，并始终尝试将其保持在1000或以下。

- Mathews Mathai

Answer 2

嗨，我在这里做了几件事情：

• 使用box-sizing来忽略元素周围的任何填充，以便它们始终适合
• 现在你的导航列表有5个项目而不是4个（25％），因此使用20％的宽度
• 在li上使用margin:0和padding:0，以便它们不会添加任何额外的空间

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

#nav
{
    list-style: none;
  margin: 0;
    padding: 0;
}

#nav li
{
    font-size: 24px;
    width: 20%;
  float: left;
  margin:0;
  padding: 0;
}

<nav id="navigation">
                <ul id="nav">
                    <li><a href="index.php">Home</a></li>
                    <li><a href="DisplayCD.php">Browse&nbsp;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>

- Nathaniel Flick

Answer 3

大多数答案建议更改li标签的宽度等，虽然这在一段时间内有效，但仍会有一个点，li要么重叠，要么被强制换行。我建议添加媒体查询，并在用户屏幕太小时更改样式：

#nav {
  list-style: none;
  display:flex; /*New: allows us to use flex:1;*/
  margin: 0;
  padding: 0;
}
#nav li {
  font-size: 24px; /*NB: Try using a different unit: pt, em, rem, etc...*/
  flex:1; /*All items are the same size*/
  height: 50px;
}
@media (max-width: 700px) {
  #nav{display:initial;}
}

<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>

- jaunt