166

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

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

4

12 回答 12

142

您可以使用边距。请参阅示例：

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}
于 2013-10-08T17:31:44.177 回答
58

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-08T17:32:39.307 回答
41

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

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

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

JSFiddle

于 2013-10-08T17:52:17.170 回答
35

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

li + li {
  margin-top: 10px;
}
于 2020-09-14T19:37:58.733 回答
29

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

于 2013-10-08T17:31:22.380 回答
7

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

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

然后，在 html 中：

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>
于 2020-04-24T22:40:30.607 回答
5

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

ul {
  line-height: 45px;
}
<ul>
<li>line one</li>
<li>line two</li>
<li>line three</li>
</ul>

于 2021-01-14T03:44:50.337 回答
4

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

于 2019-01-15T20:56:49.527 回答
0

Use CSS grid on the parent ul element like so:

ul {
  display: grid;
  gap: 10px;
}
于 2021-12-16T17:51:41.050 回答
0

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

于 2019-06-14T14:58:50.927 回答
0

我发现通过将 margin-bottom 添加到有序列表作为一个整体而不是单个列表项来创建列表项之后的间距要容易得多。

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

于 2022-01-18T16:51:51.443 回答
-7

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

于 2014-12-28T12:57:52.713 回答