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

1. 使用Flex布局
2. 使用CSS Grid布局

CSS讓列表橫向排列的技巧

在CSS中，我們可以通過(guò)使用Flex布局或者CSS Grid布局來(lái)讓列表橫向排列，下面我們將分別介紹這兩種方法。

使用Flex布局

Flex布局是一種靈活的布局方式，可以輕松地讓列表橫向排列，我們可以通過(guò)設(shè)置display屬性為flex，并且設(shè)置flex-direction屬性為row來(lái)實(shí)現(xiàn)。

ul {
  display: flex;
  flex-direction: row;
}

這樣，列表中的每個(gè)項(xiàng)目將會(huì)按照橫向順序排列。

使用CSS Grid布局

CSS Grid布局是一種強(qiáng)大的布局系統(tǒng)，可以讓我們?cè)诰W(wǎng)頁(yè)上創(chuàng)建復(fù)雜的網(wǎng)格結(jié)構(gòu)，我們可以通過(guò)設(shè)置display屬性為grid，并且設(shè)置grid-template-columns屬性來(lái)定義網(wǎng)格的列數(shù)。

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

這樣，列表中的每個(gè)項(xiàng)目將會(huì)按照橫向順序排列，并且每個(gè)項(xiàng)目都會(huì)占據(jù)網(wǎng)格的一列。

需要注意的是，在使用CSS Grid布局時(shí)，我們需要確保每個(gè)項(xiàng)目都設(shè)置了grid-column屬性來(lái)指定其在網(wǎng)格中的位置。

li {
  grid-column: 1;
}

這樣，每個(gè)項(xiàng)目就會(huì)按照我們指定的位置在網(wǎng)格中排列。