Lucky bag::blog: dt と dd を横並び

個別記事

前後の記事

dt と dd を横並び

この記事が属するカテゴリー: CSS

定義リスト 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 の指定をどうやって良いのか分からなかった。うまい方法ってあるのかしらん。

2005-10-04T13:51:12+09:00 | コメント (0) | トラックバック (6) |

トラックバック

このエントリーのトラックバックURL:: http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/317

このリストは、次のエントリーを参照しています: dt と dd を横並び:

ノンセクションの135 さんからのトラックバック: [Web]Lucky bag::blog: dt と dd を横並び; メモ。 [続きを読む]; 2005年10月05日 07:30

takuyaのもろもろ覚え書きさんからのトラックバック: dt と dd を横並び; どうやるんだっけ？っていつも忘れちゃうからメモメモ。 [続きを読む]; 2006年01月06日 13:13

まさにっきさんからのトラックバック: [その他]tableタグを使わないでちょっとしたリストを作りたいんだけど; 　W3Cの精神にのっとって？　レイアウトにtableタグを使用しないようにしたい。前からそれは考えていたんだけど、実装するのがエラくむずい。で、今回リベ... [続きを読む]; 2006年03月31日 01:39

吉田哲也ブログ(仮) さんからのトラックバック: DLタグ関連小技メモ; なるべくテーブルを使わずに綺麗にコーディングしたいのだが、DLタグでフォームを作... [続きを読む]; 2006年05月04日 15:13

白米と塩さんからのトラックバック: 定義リストを横並びにする; 定義リストのdtとddを横並びにして表っぽくする。【方法】 dt { width: 7em; /* 定義用語よりも少し長めに設定 */ } ... [続きを読む]; 2006年05月07日 16:46

よろず投資日記・個別株式の自動売買さんからのトラックバック: IE7でdt要素にfloat:leftを適用するとdt要素が印刷されないことがある？; HTML 4.0 Transitionalな文書を書いていて、IE7の困ったバグ？に気付きました。その文書内だけでの話なのですが、dt要素とdd要素を... [続きを読む]; 2008年02月26日 01:10

"dt と dd を横並び"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を < 、> を > とそれぞれ置き換えてください。

Lucky bag::blog