html - 如何在列表项之间设置垂直空间?

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

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

Brice Coustillas asked 2019-09-11T06:51:40Z
6个解决方案
91 votes

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

[http://jsfiddle.net/LthgY/]

li{
  margin: 10px 0;
}
answered 2019-09-11T06:51:59Z
28 votes

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

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

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

的jsfiddle

Paulie_D answered 2019-09-11T06:52:29Z
26 votes

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

disinfor answered 2019-09-11T06:52:54Z
26 votes

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

answered 2019-09-11T06:53:36Z
0 votes

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

Malcolm Stone answered 2019-09-11T06:54:01Z
-8 votes

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

Melvyn Owen answered 2019-09-11T06:54:27Z
translate from https://stackoverflow.com:/questions/19254411/how-do-i-set-vertical-space-between-list-items