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

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

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

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

<dl>
  <dt>北海道</dt><dd>札幌市</dd>
  <dt>青森県</dt><dd>青森市</dd>
  <dt>岩手県</dt><dd>盛岡市</dd>
</dl>

<dl>

</dl>

dt{
  float:left;
  clear:both;
}

dd{
  float:left;
}

dt{

float:left;

clear:both;

}

dd{

float:left;

}

<dl>
  <dt>北海道</dt><dd>札幌市</dd>
  <dt>青森県</dt><dd>青森市</dd>
  <dt>岩手県</dt><dd>盛岡市</dd>
</dl>
<div style="clear:both;"></div>

<dl>

</dl>

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