如何将 6 个 <li> 标签拉伸到行尾？

【问题标题】：How to stretch 6 <li> tags till the end of the line?如何将 6 个 <li> 标签拉伸到行尾？
【发布时间】：2018-07-16 08:59:13
【问题描述】：

我的导航菜单中水平显示了 6 个列表项标签。我想将这 6 个<li> 标签拉伸到行尾，但问题是我不知道<li> 标签的长度（因为<li> 标签中的文本可以更改），这个导航栏应该反应灵敏。

【问题讨论】：

【解决方案1】：

您可以使用弹性框。在你的情况下：

ul {
  display: flex;
  justify-content: space-between;
}

ul {
  display: flex;
  justify-content: space-between;
  
  padding: 10px;
  background: gray;
  list-style: none;
}

<ul>
  <li>Новости</li>
  <li>Новости</li>
  <li>Новости</li>
  <li>Новости</li>
  <li>Новости</li>
  <li>Новости</li>
</ul>

【讨论】：

【解决方案2】：

您可以尝试使用 flexbox，如下例所示。

ul{
 display: flex;
 width: 100%;
 justify-content: space-around;
 list-style: none;
 margin: 0;
 padding: 0;
}

<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>

【讨论】：