0

我需要增加小数点和有序列表文本之间的间距，但我使用的是 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/

4

2 回答 2

1

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

http://jsfiddle.net/PR8Qd/

于 2013-08-16T15:44:23.687 回答
0

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

于 2013-08-16T15:37:12.777 回答