dtの中身が長くなるとレイアウトがおかしくなるので、dtの中身が可変のときは別の方法を考える必要がある。
※定義リストを横並びにする方法は以下参照。

HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<dl> <dt>リンゴ</dt> <dd>皮が赤い種類が多いが、<br/>黄緑色や黄色の種類もある。</dd> <dt>みかん</dt> <dd>こたつのお供。食べすぎると手が黄色くなる。</dd> <dt>バナナ</dt> <dd>昔は高級品だったらしい。</dd> <dt>キウイ</dt> <dd>毛がフサフサしている。</dd> <dt>ぶどう</dt> <dd>種ごと食べるとヘソから芽が出てくるらしい。</dd> </dl> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
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; } |
コメントを残す