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(定義タグ)を横並びにするサンプルはこちら
上記の記述とは多少異なる部分はあります。詳しくはソースを確認してください。
