如何设置列表项之间的垂直间距？答案

【问题标题】：How do I set vertical space between list items?如何设置列表项之间的垂直间距？
【发布时间】：2013-10-15 18:31:44
【问题描述】：

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

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

【问题讨论】：

ul li { margin: ???; padding: ???; line-height: ???; } 全部或部分 CSS 属性。

标签： html css html-lists

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以使用边距。看例子：

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

【讨论】：

具体来说，在 li 元素而不是 ul 元素上使用边距。

【解决方案3】：

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 扩展，这将为旧版浏览器启用此功能。

【讨论】：

@Layne 作为 Web 开发人员/编码人员，我们工作的一部分是提供可在尽可能多的环境中工作的解决方案。对于所提出的问题，您的回答确实有点矫枉过正。
我不这么认为。您只为您想要定位的环境提供解决方案，除非您计划扩展，否则其他一切都将是矫枉过正。此外，所有答案都有在第一个/最后一个列表元素之前和/或之后添加空格的缺点。这不是问题，他只想在列表元素之间留一个间距（至少他写了它）。其他答案中的最后一个元素之后会有一个间距，尽管后面没有 li 元素。
他使用的环境是网络浏览器。建议一种适用于任何地方的解决方案并不过分。另外，如果您真的担心最后一项边距，您不会建议需要 js 修复的解决方案。您可以使用:first-child，它适用于所有 IE7+
@disinfor 我不同意针对所有目标。 Web 开发的部分压力来自支持不支持我们的浏览器。 Safari 就是其中之一。我们需要抵抗阻碍互联网的浏览器medium.com/@richtr/…。我们的网页应该带回“我们不支持您的浏览器”的通知，而不是让它在任何地方都能正常工作。我们也需要告知客户并勇敢地面对客户。或者我们什么也不做，做个很棒的地板垫。
@1.21gigawatts "我们的网页应该带回 "我们不支持您的浏览器"" 嗯，不。这被称为破坏竞争，在多个国家都是非法的。微软通过 Skype for Web 做到了这一点。 Skype for Web 仍然可以在其他浏览器中完美运行。 Google 在 Safari 中使 Youtube 出现故障一年多。谷歌阻止 Tor 用户使用某些服务。 “网络平台”的意义不在于使应用程序和服务独立于平台，而不是阻止特定平台吗？如果你想这样做，为什么不制作原生程序呢？最后，它们更强大。

【解决方案4】：

我会倾向于这个有 IE8 支持的优点。

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

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

JSFiddle

【讨论】：

【解决方案5】：

<br>between <li></li> 行条目似乎在我尝试过的所有网络浏览器中都运行良好，但它未能通过在线 W3C CSS3 检查器。它准确地为我提供了我所追求的行距。就我而言，因为它无疑是有效的，所以无论 W3C 怎么说，我都会坚持使用它，直到有人能提出一个好的合法替代方案。

【讨论】：

如果您对当前的行高感到满意，您的建议可以正常工作，但我认为他想指定自己的空间量。使用换行符只是使用当前行高创建新行。
如果您在包含许多项目的列表上进行迭代，添加 br 是一种糟糕的做法。正如上述答案所建议的那样，标记是添加空间的最安全、最可靠的方法。

【解决方案6】：

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

【讨论】：

另外，style /style type 标签也被弃用了

【解决方案7】：

使用伪类为每个列表设置 padding-bottom 是一种可行的方法。也可以使用行高。请记住，字体属性（例如 font-family、Font-weight 等）在高度不均匀时会起作用。

【讨论】：

你能提供一个解决方案的例子吗？

【解决方案8】：

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

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

然后，在html中：

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

【讨论】：

【解决方案9】：

老问题，但我认为它缺乏答案。我会使用相邻的兄弟姐妹选择器。这样我们只写“一行”CSS，并考虑到结尾或开头的空格，这是大多数答案所缺乏的。

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

【讨论】：

这值得更多的支持来提高对该解决方案的认识。这很简单。
迄今为止最好的解决方案
对我来说，这里的重点是margin-top 而不是line-height。我有多行列表项——即每个列表项占用几行 - 我不希望列表项中的行之间有额外的间距；我只想要列表项之间的额外间距。这是这样做的。（我也在一个不能使用 CSS 代码的上下文中编写 HTML；我必须将 CSS 内联。）

【解决方案10】：

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

ul {
  line-height: 45px;
}

<ul>
<li>line one</li>
<li>line two</li>
<li>line three</li>
</ul>

【讨论】：

【解决方案11】：

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

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

【讨论】：