如何在列表項目之間設置垂直空間？

在<ul>元素內，顯然可以使用line-height屬性格式化行之間的垂直間距。如何在列表項目之間設置垂直空間？

我的問題是，在<ul>元素內，如何設置列表項之間的垂直間距？

來源

2013-10-08 Brice Coustillas

'ul li {margin：???;填充：???;行高：???; }全部或部分CSS屬性。 –

將margin加入您的li標籤。這將在li之間創建空間，並且您可以使用line-height將空間設置爲li標記中的文本。

來源

2013-10-08 17:31:22 disinfor

您可以使用保證金。見例如：

http://jsfiddle.net/LthgY/

li{ 
    margin: 10px 0; 
}

來源

2013-10-08 17:31:44

HTML

<ul> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
    <li>D</li> 
    <li>E</li> 
</ul>

CSS

li:not(:last-child) { 
    margin-bottom: 5px; 
}

編輯：如果你不使用的特殊情況下的最後li元素的列表之後會有一個小間距，您可以在這裏看到：http://jsfiddle.net/wQYw7/

現在比較，我的解決方案：http://jsfiddle.net/wQYw7/1/

當然，這並不工作在舊的瀏覽器，但你可以很容易地使用js的擴展，這將使這個舊的瀏覽器。

來源

2013-10-08 17:32:39

不適用於IE <9 – iambriansreed

@Layne作爲Web開發人員/編碼人員的一部分工作是提供可在儘可能多的環境中工作的解決方案。對於所問的問題，你的回答真的太過分了。 – disinfor

我不這麼認爲。你只提供一個你想要的目標環境的解決方案，除非你打算擴展，否則其他一切都會過度消耗。此外，所有答案都有在第一個/最後一個列表元素之前和/或之後添加空格的缺點。這不是問題，他只想在列表元素之間有一個間隔（至少他寫了它）。其他答案中的最後一個元素之後會有一個間距，儘管沒有以下li元素。 – 2013-10-08 17:41:08

我會傾向於這個具有IE8支持的優點。

li{ 
    margin-top: 10px; 
    border:1px solid grey; 
} 

li:first-child { 
    margin-top:0; 
}

JSFiddle

來源

2013-10-08 17:52:17

-9

<br><li></li>之間行條目似乎我已經嘗試了所有的Web瀏覽器很好地工作，但未能通過在線W3C CSS3檢查。它給了我精確的行距。就我而言，由於它毫無疑問是有效的，我堅持使用它，無論W3C說什麼，直到有人能夠提出一個好的合法替代方案。

來源

2014-12-28 12:57:52

如果您對目前的線高度感到滿意，您的建議可以正常工作，但我認爲他想指定自己的空間量。使用換行符只需使用當前行高來創建新行。 –

如果您在包含多個項目的列表上迭代，則添加br是一種可怕的做法。正如上面的答案所暗示的那樣，標記是最安全和最穩固的增加空間的方式。 – SeaWarrior404

如何在列表項目之間設置垂直空間？

回答

相關問題