我想知道如何使导航上的所有元素均匀分布

Question

我想知道如何使导航上的所有元素均匀分布。这是一个学校项目，我正在创建一个网站，但无法解决该问题，并且我查看的所有解决方案均无效。

<style>
    div {
      width: 1330px;
      padding: 10px;
      margin: 0; 
      background-color: #212F3D;
      text-align: center;
    }
</style>

Answer 1

您基本上有两个选择，可以使用display:flex;或display:inline-block;。

Flex会确保您的商品以相同的间距在端到端显示（请注意示例中的CSS规则：justify-content:space-between ），而内联-block可用于使菜单项居中对齐，并以边距手动添加其间距。

我建议使用flex，因为它似乎更适合您的要求，here's a fiddle showing两者之间的区别，示例如下。

使用Flex：

.header ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display:flex; /* This is the part to focus on */
  flex-wrap: wrap; /* This is the part to focus on */
  justify-content: space-between; /* This is the part to focus on */
  background-color: rgba(25,57,125, 0.8);
}
.header li {
  display: block;
  border: 1px solid #000000;
  padding: 2px;
}

<div class="header">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 has a long name</li>
<li>Item 4</li>
<li>One more Item</li>
</ul>

---

使用嵌入式块

.header ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center; /* This is the part to focus on */
  background-color: rgba(125,57,125, 0.8);
}
.header li {
  border: 1px solid #000000;
  padding: 2px;
  display: inline-block; /* This is the part to focus on */
  margin: 0 5px;
}

<div class="header">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 has a long name</li>
<li>Item 4</li>
<li>One more Item</li>
</ul>