定義リストdlで改行したときにddの頭の位置を揃える

dtの中身が長くなるとレイアウトがおかしくなるので、dtの中身が可変のときは別の方法を考える必要がある。

※定義リストを横並びにする方法は以下参照。

HTML


<dl>
    <dt>リンゴ</dt>
    <dd>皮が赤い種類が多いが、<br/>黄緑色や黄色の種類もある。</dd>
    <dt>みかん</dt>
    <dd>こたつのお供。食べすぎると手が黄色くなる。</dd>
    <dt>バナナ</dt>
    <dd>昔は高級品だったらしい。</dd>
    <dt>キウイ</dt>
    <dd>毛がフサフサしている。</dd>
    <dt>ぶどう</dt>
    <dd>種ごと食べるとヘソから芽が出てくるらしい。</dd>
</dl>

<dl>

<dd>皮が赤い種類が多いが、<br/>黄緑色や黄色の種類もある。</dd>

<dd>こたつのお供。食べすぎると手が黄色くなる。</dd>

<dd>昔は高級品だったらしい。</dd>

<dd>毛がフサフサしている。</dd>

<dd>種ごと食べるとヘソから芽が出てくるらしい。</dd>

</dl>

CSS


dl {
    margin: 20px;
    padding: 10px;

    border: 1px solid #000;
}

dt {
    padding: 5px;
    border: 1px solid #f00;

    /* 幅を指定する */
    width: 100px;



    /* dtとdlを横並びにする */
    float: left;

    /* 行ごとにmarginを取るときは、dtとddの両方にmargin-bottomが必要 */
    margin-bottom: 5px;
}

dd {
    padding: 5px;
    border: 1px solid #00f;

    /* dtの幅と同じだけmargin-leftをとると、改行したときにddの頭の位置が揃う */
    margin-left: 100px;



    /* 行ごとにmarginを取るときは、dtとddの両方にmargin-bottomが必要 */
    margin-bottom: 5px;
}

dl {

margin: 20px;

padding: 10px;

border: 1px solid #000;

}

dt {

padding: 5px;

border: 1px solid #f00;

/* 幅を指定する */

width: 100px;

/* dtとdlを横並びにする */

float: left;

/* 行ごとにmarginを取るときは、dtとddの両方にmargin-bottomが必要 */

margin-bottom: 5px;

}

dd {

padding: 5px;

border: 1px solid #00f;

/* dtの幅と同じだけmargin-leftをとると、改行したときにddの頭の位置が揃う */

margin-left: 100px;

/* 行ごとにmarginを取るときは、dtとddの両方にmargin-bottomが必要 */

margin-bottom: 5px;

}

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル