4

基本的に私はもちろん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>

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

4

2 に答える 2

5

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

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

dd {
    margin-left: 9em;
}

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

JS フィドルのデモ

参考文献:

于 2012-04-25T23:31:26.570 に答える
-1

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

<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 機能を使用する必要があります。

于 2012-04-26T06:33:31.497 に答える