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

Question

I need to increase the spacing between the decimal and the text of an ordered list, but I am using a DL instead of an OL element.

With the margin-right of the ::before element I can adjust the spacing.

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
}

Here is the jsfiddle of what I tried. The spacing works, but the enumeration is not correct. What am I doing wrong??

http://jsfiddle.net/Fym2G/

Answer 1

or you could use a combination or of content counter and counter-increment and slap a margin on it.

http://jsfiddle.net/PR8Qd/

Answer 2

Move display:list-item to dt{ display:list-item} It worked for me by changing your code. Here is the link to the edited code: http://jsfiddle.net/Fym2G/5/