Question

我做了一些更改，为我的导航添加了一个额外的链接但是它不是内联的，你可以看到“信用”被推到下一行。我尝试更改位置或显示在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的块。 280 * 4 = 1120px -i元素的总宽度，不包括'Credits'。

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

Answer 2

您好我在这里做了几件事：

使用box-sizing忽略元素周围的任何填充，以便它们始终适合
使用20％宽度，因为您的导航列表中有5个项目而不是4个（25％）
在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>

Answer 3

大多数答案建议更改li标签的宽度等等，虽然这会有一段时间仍然会有li重叠或被强制换行的点。我建议添加media query并在用户屏幕太小时更改样式：

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

CSS - 导航不合适

3 个答案: