CSS 水平排版是 Web 開發中非常常用的技巧之一。而<li>元素常常常常常常常常常常常常常常常常常常常常常常常常常常常常常常用于作為項目列表的容器。

在本文中，我們將介紹如何使用 CSS 將<li>元素水平排列。

.container {
display: flex; /* 設置容器為 Flex 布局 */
justify-content: space-between; /* 項目對齊方式 */
/* 以下為可選項 */
flex-wrap: wrap; /* 容器內項目換行 */
list-style: none; /* 去除列表樣式 */
margin: 0;
padding: 0;
}
.container li {
width: 30%; /* 定義每個項目占據容器寬度的百分比 */
}

如上所述，我們如何做到這一點的？我們創建了一個名為.container的類，并將其設置為display: flex。這會將其內部的所有元素都變成靈活的，并將它們水平排列。

我們還將justify-content: space-between的值設置為項目之間的間距，這樣我其中的每個項目就會以相同的距離水平排列。

最后，我們針對<li>元素設置了一個相應的 CSS 樣式，使其占據容器寬度的 30%。同樣地，您也可以使用其他的寬度百分比。

總體來說，這種 CSS 技術可以幫助您更好地布置基于<li>元素的項目列表。當然，您也可以將其應用到其他元素上。