本文目錄導(dǎo)讀：

1. Flex布局
2. Grid布局

CSS無(wú)序列表橫著排列的方法

在CSS中，我們可以通過(guò)使用Flex布局或者Grid布局來(lái)實(shí)現(xiàn)無(wú)序列表的橫著排列，下面我們將分別介紹這兩種方法。

Flex布局

Flex布局是一種靈活的布局方式，它可以讓我們輕松地實(shí)現(xiàn)元素的橫向排列，我們可以通過(guò)設(shè)置ul元素的display屬性為flex，并將justify-content屬性設(shè)置為space-between或者center來(lái)實(shí)現(xiàn)無(wú)序列表的橫著排列。

ul {
  display: flex;
  justify-content: space-between;
}

Grid布局

Grid布局是一種二維布局方式，它可以將元素排列成網(wǎng)格，我們可以通過(guò)設(shè)置ul元素的display屬性為grid，并將grid-template-columns屬性設(shè)置為repeat(auto-fill, minmax(100px, 1fr))來(lái)實(shí)現(xiàn)無(wú)序列表的橫著排列。

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

需要注意的是，以上兩種方法都需要在ul元素的子元素li上設(shè)置寬度或者max-width屬性，以避免元素寬度過(guò)大導(dǎo)致橫向排列失效，我們還需要根據(jù)具體的需求來(lái)調(diào)整其他樣式屬性，以達(dá)到更好的視覺(jué)效果。