2015.6.12
2020.1.7

<dl>タグ(dt、dd)の高さを合わせる方法

概要

dlタグを使用してdtと最初のddの高さを揃えたい時の方法です。

詳細

◆ 通常の表示

果物:
リンゴ
みかん
バナナ

<dl>
    <dt>果物:</dt>
    <dd>リンゴ</dd>
    <dd>みかん</dd>
    <dd>バナナ</dd>
</dl>

◆ 横並びの表示

果物:
リンゴ
みかん
バナナ

<dl>
    <dt style="float:left;">果物:</dt>
    <dd style="margin-left:50px;">リンゴ</dd>
    <dd style="margin-left:50px;">みかん</dd>
    <dd style="margin-left:50px;">バナナ</dd>
</dl>

参考リンク

CSS】関連記事