dtの中身が長くなるとレイアウトがおかしくなるので、dtの中身が可変のときは別の方法を考える必要がある。
※定義リストを横並びにする方法は以下参照。
HTML
- リンゴ
- 皮が赤い種類が多いが、
黄緑色や黄色の種類もある。
- みかん
- こたつのお供。食べすぎると手が黄色くなる。
- バナナ
- 昔は高級品だったらしい。
- キウイ
- 毛がフサフサしている。
- ぶどう
- 種ごと食べるとヘソから芽が出てくるらしい。
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;
}