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

Question

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

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

Answer 1

你可以使用保证金.看例子:

li{
  margin: 10px 0;
}

Answer 2

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

我不这么认为。您只为您想要定位的环境提供解决方案，除非您计划扩展，否则其他一切都将是矫枉过正。此外，所有答案都有在第一个/最后一个列表元素之前和/或之后添加空格的缺点。这不是问题，他只想在列表元素之间留一个间距（至少是他写的）。尽管没有后面的 li 元素，但其他答案中的最后一个元素之后会有一个间距。 (6认同)
@disinfor我不同意针对一切.Web开发的部分压力来自支持不支持我们的浏览器.Safari就是其中之一.我们需要坚持阻止互联网的浏览器,https://medium.com/@richtr/apple-is-bad-news-for-the-future-of-the-web-6027b000b0c4#.i47g4eih9.我们的网页应该带回"我们不支持您的浏览器"的通知,不要让它在任何地方都可以运行.我们也需要通知并对抗客户.或者我们什么都不做,而且是很棒的地板垫. (4认同)

Answer 3

我倾向于这具有IE8支持的优点.

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

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

Answer 4

添加margin到您的li代码.这将在之间创建空间li,您可以使用它line-height来设置li标签内文本的间距.

Answer 5

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

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

这值得更多的支持，以提高对此解决方案的认识。这很简单。 (9认同)
对我来说，这里重要的一点是“margin-top”而不是“line-height”。我有多行列表项——即每个列表项占用几行——并且我不希望列表项内的行之间有额外的间距；我只想要列表项之间有额外的间距。这就是这样做的。（我还在无法使用 CSS 代码本身的上下文中编写 HTML；我必须将 CSS 内联。） (3认同)

Answer 6

您还可以使用 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>

Answer 7

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

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

然后，在 html 中：

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

Answer 8

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

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