如何平均分布CSS導(dǎo)航欄

在CSS中，我們可以使用多種方法來(lái)平均分布導(dǎo)航欄，以下是一種簡(jiǎn)單的方法，使用Flexbox布局來(lái)實(shí)現(xiàn)。

我們需要?jiǎng)?chuàng)建一個(gè)包含所有導(dǎo)航項(xiàng)的容器，這個(gè)容器將使用Flexbox布局，這樣它的子元素（導(dǎo)航項(xiàng)）可以平均分布。

HTML結(jié)構(gòu)可能如下：

<div class="navbar">
  <a href="#">鏈接1</a>
  <a href="#">鏈接2</a>
  <a href="#">鏈接3</a>
  <a href="#">鏈接4</a>
  <a href="#">鏈接5</a>
</div>

在CSS中，我們?cè)O(shè)置容器為Flexbox布局，并設(shè)置justify-content屬性為space-between來(lái)平均分布子元素：

.navbar {
  display: flex;
  justify-content: space-between;
}

這樣，導(dǎo)航項(xiàng)就會(huì)平均分布在容器中，即使窗口大小發(fā)生變化，它們也會(huì)保持平均分布。

如果你需要更多的控制，例如設(shè)置導(dǎo)航項(xiàng)的間距，可以使用margin或padding屬性來(lái)實(shí)現(xiàn)，如果你想在每個(gè)導(dǎo)航項(xiàng)之間添加10px的間距，可以這樣做：

.navbar a {
  margin: 0 10px;
}

這樣，導(dǎo)航項(xiàng)之間的間距就會(huì)增加，但仍然保持平均分布。