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

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

我正在用 <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>

您需要将高度设置为 navul,因为它包含浮动元素(因此没有高度)。

nav {height: 60px;}

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

你需要一个 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 并摆脱内联样式。

你可以把它当作一个 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>