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と共に調整しているウチに、いつの間にか数字が合わなくなっていたようです。
次回から注意しなければ。
＞コメントする