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