問題
dlタグのdtとddをそれぞれ横に並べたい
解決策
CSSでdtに「clear: both;」＋「float: left;」、ddに「margin-left: 100px;（任意の数値）」を設定する。
dlタグのdtとddを順に並べる
共通定義であるdlタグですが、dtを項目、ddを内容とする関係で、それぞれを横に並べて表示したい場合があると思います。今回はそんな場合の方法をご紹介します。
HTMLの構築
まず、HTMLでdlリストを構築します。
<dl class="dllist clearfix">
<dt>項目</dt>
<dd>内容</dd>
<dt>項目</dt>
<dd>内容</dd>
<dt>項目</dt>
<dd>内容</dd>
</dl>CSSの構築
次にCSSを構築します。
.dllist > dd{
margin-left: 100px;
}
.dllist > dt{
clear: both;
float: left;
width: 90px;
}
.dllist > dd{
margin-left: 100px;
}
DEMOはこちら
- 項目
- 内容
- 項目
- 内容
- 項目
- 内容
この記事のカテゴリを含む記事一覧
コメント