CSS で dl の dt dd を横並びにするときの注意メモ

| コメント(0) | トラックバック(0)

CSS HappyLieさんの「dlのdt dd を横並びに」サイトを参考にさせて頂いて、「おそえワールド」 トップページの新着情報の日付と更新内容は CSS で dl の dt dd を横並びにしています。

昨日、久々に違うページを作っていたときに同じようなものを作ったら、Firefox3.0では問題ないけど、IE7で中々横並びになりません。なんでかな~と思っていたのですが、蓋を開ければなーんだということに気がついたので、メモ。

※実際とはちょっと変えてます

dl {
 border:none;
 width:400px;
 margin:0px;
 padding:2px 0px;
}
dt {
 float:left;
 width:80px;
 padding:5px 0 5px 5px;
 clear:both;
 font-weight:bold;
}
dd {
 width:300px;
 margin-left:90px;
 padding:5px 5px 5px 10px;
 border-left:1px solid #999;
}

横並びにならなかったのは、 dt と dd の width の合計が dl の width を越えていたからでした。

margin-leftと共に調整しているウチに、いつの間にか数字が合わなくなっていたようです。
次回から注意しなければ。

トラックバック(0)

トラックバックURL: http://osoe.jp/mt/mt-tb.cgi/915

>コメントする

Firefox ブラウザ無料ダウンロード

おそえワールド検索

Powered by Movable Type 4.261