html - 如何阻止 在中间 split

Question

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

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，因为它包含 float 元素(因此没有高度)。

nav {height: 60px;}

查看此文件:https://jsfiddle.net/cm9jsyb5/