定義リスト dl 内の dt と dd を CSS を使って横並びさせる方法ってのはいくつかあるんだけど、最近どうも記憶力が低下してきた気がするんで、完全自分用メモとして記しておく。
多分オーソドックスな方法
とりあえず最もオーソドックスであろう方法。これ意外にもあるのかもしれないけど、多分今んとこ自分は知らない。（margin を使った方法は前にも記事にしたことがあるけど、一応今回も入れておく）
- dl_sample01.html
- float を使った方法
- margin を使った方法
- position を使った方法
<dl>
<dt>foo</dt>
<dd>bar</dd>
<dt>foo</dt>
<dd>bar</dd>
</dl>ちなみに margin を使った方法での margin 値の算出方法は、dt と dd それぞれの line-height 値の半分を足し、それに dt と dd との間に存在するそれぞれの margin、padding、border の値を足していった値。（分かりづらい...つまり、dt のmargin-bottom、padding-bottom、border-bottom と dd のmargin-top、padding-top、border-top ）
display: table; を使った方法
対応ブラウザでしか実現できないんで IE とかだと駄目だけど、display: table; を使った方法もあるなぁって思ってちょっとやってみた。dl 内に dt と dd がそれそれ一個ずつでマークアップしたパターン。
- dl_sample02.html（ IE 未対応）
<dl>
<dt>foo</dt>
<dd>bar</dd>
</dl>
<dl>
<dt>foo</dt>
<dd>bar</dd>
</dl>一つの dl 内にdt と dd が続くような場合って、table-row の指定をどうやって良いのか分からなかった。うまい方法ってあるのかしらん。
Comments