Question

我需要增加小数和有序列表文本之间的间距，但我使用的是DL而不是OL元素。

使用:: before元素的 margin-right ，我可以调整间距。

HTML

<dl>
    <dt>Blah blah blah</dt>
    <dd>Test test</dd>
    <dt>Blah blah blah</dt>
    <dd>Test test</dd>
    <dt>Blah blah blah</dt>
    <dd>Test test</dd>
</dl>

CSS

dl {
    list-style: decimal inside;
}
dt {
    font-size: 1.2em;
    border-bottom: 1px solid #444;
}
dt::before {
    display: list-item;
    content: ' ';
    float: left;
    margin-right: 20px;
}
dt:not(:first-of-type) {
    margin-top: 10px
}

这是我尝试过的jsfiddle。间距有效，但枚举不正确。 我做错了什么？

http://jsfiddle.net/Fym2G/

Answer 1

或者您可以使用content counter和counter-increment的组合，并在其上留一个边距。

http://jsfiddle.net/PR8Qd/

Answer 2

移动display:list-item 至 dt{ display:list-item}通过更改代码，它对我有用。以下是已编辑代码的链接：http://jsfiddle.net/Fym2G/5/

HTML列表 - 数字和文本之间的项间距

2 个答案: