dtとddを横並びに表示するのにdisplay: inline-block;をよく使っていたのですが、ddが複数行になる場合にdtやddの位置がズレこんできてしまうので、cleaf: left; と float: left;　を使って対応しました。

display: inline-block;でズレる

display: block; と float: left;を使って横並びにすると親要素の高さが算出できなくて、clearfixを使ったりoverflow: hidden;　を使ったりしなくちゃいけません。それで余計な記述が増えるのが嫌でdisplay: inline-block;　を使っていたのですが、この場合dd内のテキストが無くなったり複数行になったりした時にdtとddの位置がズレこんできちゃいます。

float: left;も使うしclear: left;も使う

display: inline-block;でズレちゃう場合はdtとddをdisplay: block;にしてfloat: left;をかけます。ただしdtのみclear: left;を使ってddへの回り込みを解除します。順番としてはまずdtにclear: left;を記述して、その後ろに同じdtに対してfloat: left;を指定します。これでdd内のテキスト量に関係なくdtとddを1個ずつ横並びにできます。

【例】

dl{

width: 100%;

}

dt{

display: block;

width: 20%;

clear: left;

float: left;

}

dd{

display: block;

width: 80%;

float: left;

}

ddが複数行じゃない時も

PC向けのサイトでレスポンシブにしない場合やddのテキスト量が変化せず1行で済む場合でも一応上記の例のようにdtにclear: left;とfloat: left;を指定する方法はおすすめです。

というのも、ローカルや自分の作業環境では表示がズレていない場合でも、ブラウザやWinとMacの違いでフォントやCSSの対応が変わってしまうからです。そうなるとテキストの行数が変わったりCSSが効いてなかったりして表示がズレこんでしまう場合があります。

あと、リキッドでコーディングしないPC向けサイトだと言ってたくせに、「スマホで見るとズレてる」と言ってくる~~おバカさん~~お客様がいたりするので、そういうのにも対応するのにいいかもしれません。

CSS

【CSS】dtとddを横並びにして複数行でもズレないようにする