dt,ddを横に並べるときの注意（俺用メモ） - Hato-Style - Note

dt,ddを横に並べるときの注意（俺用メモ） 定義リスト(dl要素)で、CSSを用いてdtとddを横に並べてレイアウトするときの話やけど。 一般的に使用されていて、最も分かりやすいがfloatとmarginを使った下記の手法。 dl dt{ width: 5em; float: left; } dl dd{ margin-left: 5em; } <dl> <dt>テストです</dt> <dd>テスト テスト テスト テスト テスト ...</dd> </dl> 組みもわかりやすくて良いんだけれどもWinIEで頭の文字が右に微妙にずれたりしてる。レイアウトによってはなかなか気づかなかったりするので要注目。 回避策として、ddにtext-indentプロパティを指定すると、美味く見える模様。でも要素や文字によりけりなので検証が必要かも。WinIEだけに適応させるの

[jksy]

わかりやすい

[suttang]

ddがずれる件