dtタグとddタグ、定義タグって言われるものです。このタグはデフォルトだと真下に並んで使いづらいですよね。そこでこのタグを横並びにする方法を紹介します。
全称セレクタで指定する
まず全称セレクタでmarginとpaddingを0に指定します。
CSS
*{ margin: 0; padding: 0; }
dl・dt・ddタグを記述する
HTML
<dl> <dt>定義する言葉</dt> <dd>説明文が入ります。</dd> </dl>
css側に個々の指定をする
CSS
dt { float: left; width: 75px; } dd { margin-left: 75px; }
ポイントはddタグに負のマージンを記述することです。dtタグのwidthとddタグのmargin-leftは同じ幅を指定しないとズレがでてきます。
この方法意外にもmarginの指定だけでやる方法や、positionの指定でやる方法がありますが、おいおい載せます。
dtとdd(定義タグ)を横並びにするサンプルはこちら
上記の記述とは多少異なる部分はあります。詳しくはソースを確認してください。