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

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>

---

使用内联 block

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