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 セマンティクスに関する限り、これは間違いなく良いことではありません。（1つには、クロムで動作させることができないようです）。これは表形式のデータであるため、テーブルに配置する必要があります。自動インクリメントに関しては、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 に答える