当前位置 : 主页 > 网页制作 > html >

html – 如何在有序列表的项目之间添加空行?

来源:互联网 收集:自由互联 发布时间:2021-06-12
参见英文答案 How do I set vertical space between list items?6个 Spacing between bullet list rows8个 我目前有以下HTML: ol liFoo/li liBar/li liBaz/li/ol 这产生了通常的结果: Foo 酒吧 巴兹 我想在每个列表项之
参见英文答案 > How do I set vertical space between list items?                                    6个
>             Spacing between bullet list rows                                    8个
我目前有以下HTML:

<ol>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ol>

这产生了通常的结果:

    > Foo
    >酒吧
    >巴兹

我想在每个列表项之间添加一个空行,以便输出如下所示:

    > Foo
    >酒吧
    >巴兹

这可以通过添加两个< br>来完成.每次收盘前的标签< / li>标签.然而,它是丑陋和不优雅的.

有没有更好的方法在HTML或CSS中实现相同的结果?

您可以根据自己的喜好增加每个li的边距或填充.例如.

li {
  margin-bottom: 1rem;
}
网友评论