2008.02.27

dtとddを横並びにしたメニューのサンプル5個

dt ddの横並びサンプル画像

会社概要のページ・個人のプロフィールページ・Q&Aなどにdl,dt,ddを用いた定義リストを良く使います。この定義リストは思うように横並びにならないんですよね。
そこで、試しにいくつかサンプルを作ってみましたので参考にしてみて下さい。個人的にはサンプル4・5がお薦めです。

サンプル1 （borderを使った縦ライン）

dtのテキスト量が多い場合・・・縦ボーダーが途切れる。FireFoxだとddはdtの高さに合わせてくれない。
ddのテキスト量が多い場合・・・縦ボーダーが途切れる。dtはddの高さに合わせてくれる。

サンプル 1

→サンプル 1

サンプル2 （backgroundを使った縦ライン）

dtのテキスト量が多い場合・・・縦ボーダーは途切れないが、FireFoxだとddはdtの高さに合わせてくれない。
ddのテキスト量が多い場合・・・縦ボーダーは途切れない。dtはddの高さに合わせてくれる。

サンプル 2

→サンプル 2

サンプル3 （縦ラインはbackground・横ラインはborder）

dtのテキスト量が多い場合・・・縦ボーダーは途切れないが、IE6だとddはdtの高さに合わせてくれない。
ddのテキスト量が多い場合・・・縦ボーダーは途切れない。dtはddの高さに合わせてくれる。

サンプル 3

→サンプル 3

サンプル4 （float未使用・縦ラインはbackground）

dtのテキスト量が多い場合・・・縦ボーダーは途切れない。ddはdtの高さに合わせてくれる。
ddのテキスト量が多い場合・・・縦ボーダーは途切れない。dtはddの高さに合わせてくれる。
※line-heightとmarginを使って横に並べてるので、行間とか項目間の高さがブラウザによって違うかもしれない。

サンプル 4