html - 右側に複数のDDがあるDT？

Question

基本的に私はもちろんHTMLでこのようなものを達成したいと思います：

  Description:  Element #1
                Element #2
                Element #3 [eventually bla bla bla]
                [...]

テーブルでは冗談です：

<table>
  <tr>
   <td>Description</td>
   <td>Element #1<br>Element #2<br>Element #3 [eventually bla bla bla]</td>
  </tr>
</table>

しかし、私はテーブルを使用する必要がありますか？

score 5 · Accepted Answer

これはそれほど難しいことではありません。コンビネータを覚えておいてください。

dt {
    float: left;
    width: 8em;
}

dd {
    margin-left: 9em;
}

dd + dd {
    margin-left: 9em;
}

参考文献:

score -1 · Accepted Answer

テーブルを使用するのは実に簡単で、各要素を独自のセルにする追加オプションがあります。

<table>
  <tr>
   <td rowspan=3>Description
   <td>Element #1
  <tr>
   <td>Element #2
  <tr>
   <td>Element #3 [eventually bla bla bla]
</table>

するとスタイリングが楽になります。td { vertical-align: top}(おそらく、いくつかの境界線、おそらくパディングが必要であることがわかるでしょう。) したがって、問題は、目的の外観をほぼ直接提供する単純なテーブルのバリアントを使用しないのはなぜでしょうか?

定義リストマークアップを使用dlすると、「説明」テキストの幅を推測するか、ブラウザ間で安定して動作しない CSS 機能を使用する必要があります。

2 に答える 2