dt と dd を横に並べる CSS はじめてのブログデザイン今日は定義リスト（dl タグ）内の dt と dd タグを CSS で横に並べる方法です。 いつも dt と dd を CSS で並べようとした時に『さてさて・・・はて？』となり、CSS の専門書から同じページを開いているような気がしたのでメモ。 定義リストの要素 dt と dd を CSS で横に並べる方法は幾つかあるのですが、私が最も使用している方法を記述しておきます。 dt { float : left; width : 10em; } dd { margin-left : 10em; } まず dt を float させつつ width を指定。上のサンプルソースの様に em で指定するとユーザーにテキストサイズを変更されても追従します。 ちなみに 10em は font-size が 12px なら 120px となります。つまり font-size で指定されている大きさを 1
