ホーム > マークアップ > CSS > dlを使って、dtとddを横並びにする
dlを使って、dtとddを横並びにする
- 公開日
- 2007年02月23日
dl{
width:○○px;
}
dt{
float:left;
width:△△px;
}
dd{
margin-left:△△px;
}
width:○○px;
}
dt{
float:left;
width:△△px;
}
dd{
margin-left:△△px;
}
- floatをdtにのみ適用させるのがポイント。
これにより、ddが数行に渡っても、次のdtはそのddの後に表示される。 - ddのmarginにdtに指定した幅と同じ値を取ることでdtとddを別々のボックスとなるのがポイント。
また、ddにmarginを指定せずにborderを指定した場合、ddの上にdtがフロートしている状態になるので、dtの横にborderが表示される。
- この記事に関するご意見・ご感想をお待ちしております。