CSS導(dǎo)航中平均分布li的方法

在CSS導(dǎo)航中，平均分布li是一個(gè)常見的需求，通過簡(jiǎn)單的CSS技巧，我們可以輕松地實(shí)現(xiàn)這一點(diǎn)。

我們需要?jiǎng)?chuàng)建一個(gè)包含多個(gè)li元素的導(dǎo)航列表，我們可以使用CSS的flex布局或grid布局來平均分布這些li元素。

如果我們使用flex布局，可以像下面這樣寫：

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

這里的justify-content: space-between表示在導(dǎo)航列表中的li元素之間平均分配空間，這樣，每個(gè)li元素就會(huì)得到相等的間距，從而實(shí)現(xiàn)平均分布。

如果我們使用grid布局，也可以實(shí)現(xiàn)類似的效果。

.nav-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

這里的grid-template-columns表示每個(gè)li元素的***小寬度為100px，***大寬度為1fr（即剩余空間的1份），這樣，每個(gè)li元素就會(huì)根據(jù)剩余空間的多少來自動(dòng)調(diào)整寬度，從而實(shí)現(xiàn)平均分布。

無論是使用flex布局還是grid布局，我們都可以輕松地實(shí)現(xiàn)CSS導(dǎo)航中平均分布li的需求，只需選擇適合自己的布局方式，并根據(jù)實(shí)際情況進(jìn)行調(diào)整即可。