CSS是一種非常強大的樣式表語言，可以實現很多不同的布局和效果。其中一種非常常見的需求是實現列表的橫向排列。下面我們來講解一下如何使用CSS實現這個功能。

<style>
.list-container {
display: flex; /*設置flex布局*/
flex-wrap: nowrap; /*防止出現換行*/
justify-content: space-between; /*平均分配空間*/
padding: 0; /*去掉默認的內邊距*/
margin: 0; /*去掉默認的外邊距*/
list-style: none; /*去掉默認的列表樣式*/
}
.list-container li {
flex-basis: 30%; /*設置每個列表項的寬度，這里是平均分配*/
}
</style>

上面的代碼使用了flex布局，加上一些相關的屬性，就可以實現列表的橫向排列。具體來說：

• display: flex; 將容器設置為flex布局，即可激活flex相關的屬性。
• flex-wrap: nowrap; 防止出現換行，保持列表一行排列。
• justify-content: space-between; 平均分配空間，使得每個列表項之間有相同的間距。
• padding: 0; margin: 0; list-style: none; 為了去掉默認的列表樣式，需要去掉相關的內外邊距和列表樣式。
• flex-basis: 30%; 設置每個列表項的寬度，這里可以根據需求調整。

接下來，我們需要在HTML中添加對應的結構。

<ul class="list-container">
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
<li>列表項4</li>
</ul>

通過上面的代碼，我們就可以實現列表的橫向排列了。這種方法可以用于不同的場景，比如網站的導航菜單等。