定義リストに下線をつけたいと思っています。

定義リストに下線をつけたいと思っています。

（実際は、dt=日付、dd=お知らせ内容を記載するので、１行ごとの仕切りとして）

dt,ddの両方に下線をつけたところ、
・"compact"を入れると下線がdtとddの下線が重なり、破線が一部直線になる
・"float:left；"と幅指定をするとdtとddの間に2pxの隙間ができてしまう
という問題がおきます。

そこで、ddにのみ下線をつける方法で回避しようとしました。
が、下記の記述では”dtの前半分くらいに下線がつかない”という現象になります。

《CSS》
dt　{
width: 70px;
margin-left: 5px;
padding: 5px 0 5px 0;
}

dd{
border-bottom:1px dotted #999 ;
padding: 5px 0 5px 70px;
}

《HTML》
<dl compact>
<dt><img src="./image/aaa.png">2010.9.1</dt><dd>*****</dd>
<dt><img src="./image/aaa.png">2010.9.2</dt><dd>****</dd>
<dt><img src="./image/aaa.png">2010.9.3</dt><dd>***</dd>
</dl>

どのようにすれば、きれいにdtの最初からddの最後まで下線がひけるでしょうか。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2010/09/10 16:18

実験してみただけですが…

dd要素はデフォルトでインデントされているので、その分が破線が引けていないのだと思われます。

ddに　margin-left:0;　を追加すれば、要素のインデントがなくなるので、破線はdlの左端からになります。
このため、現状よりもddの内容が左によりますので、paddingの値を再調整する必要があるかも。

この回答へのお礼

margin-left:0　を追加したところ、内容が２行になってしまいましたので、
Paddingの調整をしました。
思い通りの表示ができました。

ありがとうございました。

お礼日時：2010/09/13 12:43

No.1 回答者： yambejp 回答日時： 2010/09/10 16:08

ddのスタイルシートに

margin-left:0px;
をたしてみては？