Data

定義リスト[dl]のdt/ddを横並び

reset.cssが掛かっている状態、clearfixの導入をした状態を想定

floatした要素にはwidthを設定して、改行されたddの頭が揃う。

See the Pen GJZMXZ by deniyung (@deniyung) on CodePen.

floatした要素にはwidthを設定しないので、改行されたddの頭が揃わない。

See the Pen jPqXwO by deniyung (@deniyung) on CodePen.

dtにだけfloatをかけた状態でddの頭を揃える。

See the Pen ZGOpZL by deniyung (@deniyung) on CodePen.

最初のddセレクタで日付分のマージンをemで取る。 次にdt要素に対する最初のdd要素のみマイナスの上方向にマージンを指定。

See the Pen doXpEj by deniyung (@deniyung) on CodePen.

dt要素にのみclear、float、widthプロパティの指定をして、dd要素には、dt要素のwidthの値分padding-leftの指定をする。

See the Pen BNzQNa by deniyung (@deniyung) on CodePen.