問題 × 解決策

dlタグのdtとddをそれぞれ横に並べたい

  • 2019年11月29日
  • HTML

問題

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はこちら

項目
内容
項目
内容
項目
内容

コメント

コメントを残す

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

seventeen − 3 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧