たまにdtとddを横に並べたいときがあります。
色々方法はあると思いますが、dtとddそれぞれ一個ずつの組に対して毎回下線を付けたいときはどうするか考えてみました。
よく見かけるのは一個ずつdlを閉じてしまうやりかた。
<dl>
<dt>定義語</dt>
<dd>説明文説明文説明文説明文説明文</dd>
</dl>
<dl>
<dt>定義語</dt>
<dd>説明文説明文説明文説明文説明文</dd>
</dl>
<dl>
<dt>定義語</dt>
<dd>説明文説明文説明文説明文説明文</dd>
</dl>
意味的にスマートではありませんね。
やっぱり一個のdlでひとまとめにしてみたいです。
<dl>
<dt>定義語</dt>
<dd>説明文説明文説明文説明文説明文</dd>
<dt>定義語</dt>
<dd>説明文説明文説明文説明文説明文</dd>
<dt>定義語</dt>
<dd>説明文説明文説明文説明文説明文</dd>
</dl>
やっぱこれがベストですね。
これに横並びの為のCSSを付けます。下線も付けてみます。
dt {
position: absolute;
left: 0;
width: 5em;
}
dd {
padding-left: 5em;
border-bottom: solid 1px #0000FF;
}
ポジション指定であっさりです。適当なところにrelativeを打ち込んでおくのを忘れないようにしましょう。
サンプルファイル置いておきます。
定義リストを横並びにして一対ごとに下線を付けるサンプル
コメント
CSS3なら他にも方法があるので、場合によって使い分けるといいですね。
ちなみにこちらで紹介した方法はddの高さがdt以上であることを保証できる、またはddに対してdtの高さ分のmin-heightが設定されていることが前提となります。
ずっとfloatで悪戦苦闘してました！absolute使えば良かったんですね！大変助かりました☆
[…] ●参照サイト：.rainorshine「定義リスト(dt,dd)を横並びにして 一対ごとに下線を付ける」 ＜誤り＞ <dl> <div style=”border-bottom(略)” <dt>0000年00月00日</dt> <dd>ここにテ […]