定義リスト(dl,dt,dd)は通常以下のように表示されますが、 これをCSSを使って横並び表示にすることができます。
定義リストのデフォルト表示
dlタグで普通に表示すると以下のように表示されます。
1 2 3 4 5 |
<dl> <dt>北海道</dt><dd>札幌市</dd> <dt>青森県</dt><dd>青森市</dd> <dt>岩手県</dt><dd>盛岡市</dd> </dl> |
- 北海道
- 札幌市
- 青森県
- 青森市
- 岩手県
- 盛岡市
サンプルソース
例)定義リスト要素を横に並べて表示する
1 2 3 4 5 6 7 8 |
dt{ float:left; clear:both; } dd{ float:left; } |
1 2 3 4 5 6 |
<dl> <dt>北海道</dt><dd>札幌市</dd> <dt>青森県</dt><dd>青森市</dd> <dt>岩手県</dt><dd>盛岡市</dd> </dl> <div style="clear:both;"></div> |
<div style="clear:both;"></div> は、floatを打ち消すために入れています。
結果
- 北海道
- 札幌市
- 青森県
- 青森市
- 岩手県
- 盛岡市
備考
- CSSのfloat:leftを使用して、左に回り込みさせることにより横並びにしています。
コメント