表格有序列表

Question

我需要制作一个带有表格内容的有序列表，这些内容会呈现如下内容：

1. Winner         00:00
2. Runner up      00:00
3. Looser         00:00

现在，我已经设法使用以下HTML：

<ol>
    <li><dl><dt>Winner</dt><dd>00:00</dd></dl></li>
    <li><dl><dt>Runner up</dt><dd>00:00</dd></dl></li>
    <li><dl><dt>Looser</dt><dd>00:00</dd></dl></li>
</ol>

和CSS：

dt {
    display: inline-block;
    width:   5em;
}
dd {
    display: inline-block;
}

可在最新的Chrome，Safari和Firefox中正确呈现。我不知道IE。

然而，感觉不对。是否有更加语义的方法来解决使用HTML和CSS的问题？

Answer 1

就CSS语义而言，这绝对不是一件好事。 （有一件事我似乎无法让它在chrome中工作）。因为这是表格数据，所以应将其放在表格中。至于自动增量，您可以使用css count属性：

Demo

table{counter-reset:number;}

table tr td:first-child:before
{
    counter-increment:number;
    content:counter(number) ". ";
}

Answer 2

table元素。