WEB制作トラブル速戦即決術！第5回

[TROUBLE 23]

定義リストで日付とタイトルが
きれいに横並びにならない

文＝平澤隆

A.	dt要素にのみclear、float、widthの指定を行う

定義リストでマークアップし、日付とタイトルの横並びを実現しようとすると、思った以上にうまくいかないことが多い。これは、各dt要素とdd要素を包括する要素が存在せず、ブラウザのバグ対策などが困難になるため発生する。しかし、各dt要素とdd要素を包括する要素を足すことはできないため、CSSを工夫する必要がある。このトラブルは、dt要素にのみclear、float、widthプロパティの指定を行うことで解決する。

dt要素にのみclear、float、widthプロパティの指定をして、dd要素には、dt要素のwidthの値分padding-leftの指定をする。また、Internet Explorer 6はフォントの指定が違うためハックを用いて値を変更している

キレイに日付とタイトルが横並びになっている状態