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

Question

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

Answer 1

您可以使用flexbox。就您而言：

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>

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