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

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

CSS實(shí)現(xiàn)列表項(xiàng)（li）橫向排列的方法

在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要將列表項(xiàng)（li）橫向排列，以增加頁(yè)面的視覺(jué)效果和用戶體驗(yàn)，下面介紹幾種使用CSS實(shí)現(xiàn)列表項(xiàng)橫向排列的方法。

使用CSS Flexbox布局

Flexbox布局是一種靈活的布局方式，可以輕松實(shí)現(xiàn)列表項(xiàng)的橫向排列，通過(guò)設(shè)置父元素的display屬性為flex，并設(shè)置flex-direction為row，即可實(shí)現(xiàn)列表項(xiàng)的橫向排列。

HTML代碼：

<ul class="list">
  <li>列表項(xiàng)1</li>
  <li>列表項(xiàng)2</li>
  <li>列表項(xiàng)3</li>
</ul>

CSS代碼：

.list {
  display: flex;
  flex-direction: row;
  list-style: none; /* 移除默認(rèn)樣式 */
}

使用CSS Grid布局

CSS Grid布局是一種強(qiáng)大的二維布局系統(tǒng)，同樣可以實(shí)現(xiàn)列表項(xiàng)的橫向排列，通過(guò)創(chuàng)建網(wǎng)格容器，并將列表項(xiàng)放置在網(wǎng)格中，可以輕松實(shí)現(xiàn)橫向排列。

HTML代碼：

<div class="grid-container">
  <ul class="list">
    <li>列表項(xiàng)1</li>
    <li>列表項(xiàng)2</li>
    <li>列表項(xiàng)3</li>
  </ul>
</div>

CSS代碼：

.grid-container {
  display: grid; /* 創(chuàng)建網(wǎng)格容器 */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自動(dòng)適應(yīng)列數(shù) */
}
.list {
  list-style: none; /* 移除默認(rèn)樣式 */
}
``` 網(wǎng)格布局可以根據(jù)窗口大小自動(dòng)調(diào)整列數(shù)，實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，在實(shí)際應(yīng)用中可以根據(jù)需求選擇合適的布局方式，還可以通過(guò)調(diào)整間距、對(duì)齊方式等屬性進(jìn)一步優(yōu)化布局效果。