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

2019年9月24日

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

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

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

北海道

札幌市

青森県

青森市

岩手県

盛岡市

サンプルソース

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

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

結果

北海道

札幌市

青森県

青森市

岩手県

盛岡市

備考

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