[CSS] 定義リスト要素(dl, dt, dd)を横に並べる

定義リスト(dl,dt,dd)は通常以下のように表示されますが、 これをCSSを使って横並び表示にすることができます。

定義リストのデフォルト表示

dlタグで普通に表示すると以下のように表示されます。

北海道
札幌市
青森県
青森市
岩手県
盛岡市

サンプルソース

例)定義リスト要素を横に並べて表示する

<div style="clear:both;"></div> は、floatを打ち消すために入れています。

結果

北海道
札幌市
青森県
青森市
岩手県
盛岡市

備考

  • CSSのfloat:leftを使用して、左に回り込みさせることにより横並びにしています。

コメント

タイトルとURLをコピーしました