如何阻止 <nav> 在中间分裂

Question

我正在用 <nav> 元素制作这个导航栏。我有一个 link 向右浮动，其余向左浮动，以最大化导航栏的大小。但是，据我所知，第 nth-1 link 和 n 之间的所有 space 都没有背景颜色或存在。代码非常基础，如果有人不介意查看结果，它会更有意义。

nav {
  background-color: #333;
}
nav ul {
  list-style-type: none;
  width: 95%;
  padding: 0;
  margin: 0 auto;
  background-color: #333;
}
nav ul li {
  float: left;
  background-color: #333;
}
nav ul li a {
  font-size: 21px;
  display: block;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
}

<nav>

  <ul>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li style='float:right;'><a href='#'>Link</a>
    </li>
  </ul>

</nav>

Answer 1

您需要将高度设置为 nav 或 ul，因为它包含浮动元素（因此没有高度）。

nav {height: 60px;}

看到这个 fddle：https://jsfiddle.net/cm9jsyb5/

Answer 2

你需要一个 clearfix 的脚。浮动元素从正常文档流中移除，因此父元素折叠。有几种修复方法，clearfix 是一种常见的方法。另一个是浮动父元素。

nav {
  background-color: #333;
}
nav ul {
  list-style-type: none;
  width: 95%;
  padding: 0;
  margin: 0 auto;
  background-color: #333;
}
nav ul li {
  float: left;
  background-color: #333;
}

nav ul li:last-child {
  float: right;  
}
nav ul li a {
  font-size: 21px;
  display: block;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
}

.clearfix {
  overflow: auto;
  zoom: 1;
}

<nav>

  <ul class="clearfix">
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
  </ul>

</nav>

有关浮动行为的更多信息，请参阅：https://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

另请注意，您可以使用 last-child 并摆脱内联样式。

Answer 3

你可以把它当作一个 flexbox:

1.) 将 display: flex; 添加到 nav ul。这使得所有 li 个元素都为弹性项目。

2.) 将最后一个 li 元素中的内联样式更改为 margin-left: auto。这会将那个元素移到最右边。

（我还更改了 link 文本颜色，以便在深色背景上获得更好的对比度，另外我删除了相当多的 CSS，如果您使用 flexbox，则不需要）

nav {
  background-color: #333;
}
nav ul {
  display: flex;
  list-style-type: none;
  width: 95%;
  padding: 0;
  margin: 0 auto;
}
nav ul li a {
  color: #fa0;
  font-size: 21px;
  display: block;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
}

<nav>

  <ul>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li style='margin-left: auto;'><a href='#'>Link</a>
    </li>
  </ul>

</nav>

如何阻止 <nav> 在中间分裂

How do I stop <nav> from splitting in the middle

html

css

nav