一、背景
在網頁制作過程中，經常需要制作各種列表。按照默認設置，列表通常是豎排的，但是有時候我們希望把列表的排列方式變為橫排，這里介紹一下如何通過CSS實現這個目標。
二、實現方法
1. 使用display：inline-block;
默認情況下，列表項是塊級元素，每個列表項占據一整行。如果想要讓多個列表項并排顯示，可以給每個列表項設置display：inline-block;屬性。
示例代碼：
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>

2. 使用float屬性
除了display屬性之外，還可以使用float屬性實現列表項橫向排列。
示例代碼：
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>

三、注意事項
1. 行內塊級元素會默認有間隙，可以使用CSS的font-size：0；解決。
2. 如果列表項比較多，超出了容器的寬度，會導致列表換行?？梢酝ㄟ^設置white-space：nowrap;來防止列表換行。
四、總結
通過以上兩種方法可以實現列表橫向排列的效果，需要注意一些細節。希望這篇文章能夠幫助到大家。

<p>By AI</p>