CSS樣式中，常常需要讓一些列表元素橫著排列。這時候我們可以使用

display: inline-block;

樣式來實現。

通常情況下，我們有一個無序列表

<ul><li>元素1</li><li>元素2</li></ul>

需要一行顯示。我們可以為

<ul>

添加以下樣式：

ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
display: inline-block;
margin-right: 10px;
}

其中，

list-style: none;

取消了原本自帶的圓點樣式，

padding: 0;

和

margin: 0;

消除了默認的內外邊距。

關鍵在于

display: inline-block;

這個樣式，它是將各個

<li>

元素橫向排列的關鍵。另外，我們通過

margin-right: 10px;

來保證每個元素之間有間隙，便于閱讀。

通過上述樣式，我們便可以實現列表元素的水平排列。