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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

nav {height: 60px;}

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

Answer 2

您可以将其视为弹性框：

1。）将display: flex;添加到nav ul。这使得所有li个元素都是灵活项目。

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

（我还更改了链接文本颜色，以便在深色背景上获得更好的对比度，另外我删除了相当多的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>

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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