[CSS] 定義リスト(dt,dd)を横並びにして 一対ごとに下線を付ける

  • このエントリーをはてなブックマークに追加

たまにdtddを横に並べたいときがあります。
色々方法はあると思いますが、dtddそれぞれ一個ずつの組に対して毎回下線を付けたいときはどうするか考えてみました。


よく見かけるのは一個ずつ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を打ち込んでおくのを忘れないようにしましょう。

サンプルファイル置いておきます。
定義リストを横並びにして一対ごとに下線を付けるサンプル

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。




コメント

  1. たかおファン(surface) より:

    CSS3なら他にも方法があるので、場合によって使い分けるといいですね。
    ちなみにこちらで紹介した方法はddの高さがdt以上であることを保証できる、またはddに対してdtの高さ分のmin-heightが設定されていることが前提となります。

  2. たまきち より:

    ずっとfloatで悪戦苦闘してました!absolute使えば良かったんですね!大変助かりました☆

コメントを残す