如何在列表项目之间设置垂直空间？

在<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

如何在列表项目之间设置垂直空间？

回答

相关问题