dtとdd(定義タグ)を横並びにする

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください