Html 如何设置列表项之间的垂直空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19254411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I set vertical space between list items?
提问by Brice Coustillas
Within a <ul>element, clearly the vertical spacing between lines can be formatted with the line-height attribute.
在一个<ul>元素中，很明显，行之间的垂直间距可以用 line-height 属性格式化。
My question is, within a <ul>element, how do I set the vertical spacing between the list items?
我的问题是，在<ul>元素内，如何设置列表项之间的垂直间距？
回答by
You can use margin. See the example:
您可以使用保证金。看例子：
li{
margin: 10px 0;
}
回答by Brice Coustillas
HTML
HTML
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
CSS
CSS
li:not(:last-child) {
margin-bottom: 5px;
}
EDIT: If you don't use the special case for the last li element your list will have a small spacing afterwards which you can see here: http://jsfiddle.net/wQYw7/
编辑：如果你不使用最后一个 li 元素的特殊情况，你的列表之后会有一个小的间距，你可以在这里看到：http: //jsfiddle.net/wQYw7/
Now compare that with my solution: http://jsfiddle.net/wQYw7/1/
现在将其与我的解决方案进行比较：http: //jsfiddle.net/wQYw7/1/
Sure this doesn't work in older browsers but you can easily use js extensions which will enable this for older browsers.
当然这在旧浏览器中不起作用，但您可以轻松使用 js 扩展，这将为旧浏览器启用此功能。
回答by Paulie_D
回答by disinfor
Add a marginto your litags. That will create space between the liand you can use line-heightto set the spacing to the text within the litags.
将 a 添加margin到您的li标签中。这将在li和之间创建空间，您可以使用它line-height来设置li标签内文本的间距。
回答by Malcolm Stone
Many times when producing HTML email blasts you cannot use style sheets or style /style blocks. All CSS needs to be inline. In the case where you want to adjust the spacing between the bullets I use li style="margin-bottom:8px;" in each bullet item. Customize the pixels value to your liking.
很多时候在生成 HTML 电子邮件时，您不能使用样式表或样式 / 样式块。所有 CSS 都需要内联。如果您想调整项目符号之间的间距，我使用 li style="margin-bottom:8px;" 在每个项目符号中。根据您的喜好自定义像素值。
回答by Tom Bartenstein
To apply to an entire list, use
要应用于整个列表，请使用
ul.space_list li { margin-bottom: 1em; }
Then, in the html:
然后，在 html 中：
<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>
回答by Rishi jung
setting padding-bottom for each list using pseudo class is a viable method. Also line height can be used. Remember that font properties such as font-family, Font-weight, etc. plays a role for uneven heights.
使用伪类为每个列表设置 padding-bottom 是一种可行的方法。也可以使用行高。请记住，字体属性（例如 font-family、Font-weight 等）对高度不均匀有影响。
回答by Melvyn Owen
<br>between <li></li>line entries seems to work perfectly well in all web browsers that I've tried, but it fails to pass the on-line W3C CSS3 checker. It gives me precisely the line spacing I am after. As far as I am concerned, since it undoubtedly works, I am persisting in using it, whatever W3C says, until someone can come up with a good legal alternative.
<br>在<li></li>我尝试过的所有 Web 浏览器中，行条目之间似乎都运行良好，但它无法通过在线 W3C CSS3 检查器。它准确地为我提供了我所追求的行距。就我而言，因为它无疑有效，所以无论 W3C 怎么说，我都会坚持使用它，直到有人能提出一个好的合法替代方案。
