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

1. 使用CSS的display屬性
2. 使用Flexbox布局

CSS中的UL和LI元素橫向排列技巧

在現(xiàn)代網(wǎng)頁設(shè)計中，我們經(jīng)常需要將無序列表（UL）中的列表項（LI）進(jìn)行橫向排列，這種設(shè)計方式不僅美觀，還能有效地展示信息，本文將介紹如何使用CSS實現(xiàn)這一效果。

使用CSS的display屬性

要實現(xiàn)UL和LI元素的橫向排列，***直接的方法是使用CSS的display屬性，我們可以將display屬性設(shè)置為inline或inline-block，這樣，列表項就會在一行內(nèi)顯示。

ul {
  list-style-type: none; /* 移除默認(rèn)的列表樣式 */
}
ul li {
  display: inline-block; /* 將列表項設(shè)置為內(nèi)聯(lián)塊級元素 */
}

使用Flexbox布局

另一種方法是使用CSS的Flexbox布局，F(xiàn)lexbox是一種靈活的布局方式，可以輕松實現(xiàn)元素的橫向排列，對于UL和LI元素，我們可以將父元素（即UL元素）設(shè)置為Flex容器，然后使用Flex屬性控制子元素（即LI元素）的布局。

ul {
  display: flex; /* 設(shè)置Flex容器 */
  list-style-type: none; /* 移除默認(rèn)的列表樣式 */
}

兩種方法都能實現(xiàn)UL和LI元素的橫向排列，可以根據(jù)具體需求和場景選擇合適的方式，還可以通過調(diào)整間距、對齊方式等進(jìn)一步美化布局，在實際應(yīng)用中，可以根據(jù)需要靈活調(diào)整CSS樣式以達(dá)到***佳效果。