0

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

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 来解决这个问题？

4

2 回答 2

1

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

演示

table{counter-reset:number;}

table tr td:first-child:before
{
    counter-increment:number;
    content:counter(number) ". ";
}
于 2011-11-15T03:33:57.800 回答
0

table元素。

于 2011-11-15T03:35:43.017 回答