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

在 <ul>元素中，显然可以使用 line-height 属性格式化行间的垂直间距。

我的问题是，在 <ul>元素中，如何设置列表项之间的垂直间距？

471552 次浏览
小开

将 margin添加到 li标记中。这将在 li之间创建空间，您可以使用 line-height将间距设置为 li标记中的文本。

小开

您可以使用页边距，请参阅示例:

Http://jsfiddle.net/lthgy/

li{
margin: 10px 0;
}
小开

超文本标示语言

<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 元素的特殊情况，你的列表会有一个很小的间隔，你可以在这里看到: < a href = “ http://jsfiddle.net/wQYw7/”rel = “ norefrer”> http://jsfiddle.net/wqyw7/

现在比较一下我的解决方案: http://jsfiddle.net/wQYw7/1/

当然，这在旧的浏览器中不起作用，但是你可以很容易地使用 js 扩展，这将为旧的浏览器启用这个功能。

小开

我倾向于支持 IE8的优点。

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


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

JSFiddle

小开

<li></li>行条目之间的 <br>似乎在我尝试过的所有浏览器中都能很好地工作，但是它无法通过在线 W3C CSS3检查器。它给了我精确的行间距，我追求。就我而言，由于它无疑是有效的，所以无论 W3C 说什么，我都坚持使用它，直到有人能够提出一个好的合法替代方案。

小开

很多时候，当生成 HTML 电子邮件爆炸，你不能使用样式表或样式/样式块。所有 CSS 都需要内联。在您想要调整项目符号之间的间距的情况下，我在每个项目符号项中使用 li style = “ edge-bottom: 8px; ;”。根据您的喜好自定义像素值。

小开

使用伪类为每个列表设置填充底部是一种可行的方法。也可以使用行高。请记住，字体属性(如 font-family、 Font-weight 等)对不均匀的高度起着重要作用。

小开

若要应用于整个列表，请使用

ul.space_list li { margin-bottom: 1em; }

然后，在 html 中:

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>
小开

老问题了，但我觉得没有答案。我会使用相邻的兄弟姐妹选择器。这样，我们只写“一行”的 CSS，并考虑到在结束或开始的空间，这是大多数答案所缺乏的。

li + li {
margin-top: 10px;
}
小开

也可以在 ul 上使用 line-height 属性

ul {
line-height: 45px;
}


div {
border: 2px solid black;
}
<div>
<ul>
<li>line one</li>
<li>line two</li>
<li>line three</li>
</ul>
</div>

小开

在父 ul元素上使用 CSS 网格，如下所示:

ul {
display: grid;
gap: 10px;
}
小开

我发现，通过向整个有序列表而不是单个列表项添加底部边距，在列表项之后创建间距对我来说要容易得多。

<ol style="line-height: 1.5em; margin-bottom: 15px">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>


<ul style="line-height: 1.5em; margin-bottom: 15px">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>


提交答案