SYNCERのロゴ
アイキャッチ画像

dl要素を横並びにする方法

見出しと説明をペアで意味付けできるdl要素。dt要素の横幅がある程度揃っている場合は、dt要素とdd要素を横並びにした方がデザインがすっきりするでしょう。

サンプルコード

基本的にdt要素にfloat: leftを設定するだけで横並びになります。

dt {
	float: left ;
}

Safariの場合、dt要素とdd要素の上下がズレてしまうため、高さを揃えておきます。24pxは大体の、行の高さです。

dt, dd {
	min-height: 24px ;
	line-height: 24px ;
}

デモ

見出しを揃える場合

dd要素のmargin-leftプロパティには、dt要素の横幅より少しだけ大きい値を指定しましょう。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
dt {
	float: left ;
}

dt::after {
	content: ":" ;	/* dtの後に区切り文字を付けたい場合 */
}

dd {
	margin-left: 80px ;
}

/*safari用 */
dt, dd {
	min-height: 24px ;
	line-height: 24px ;
}
	</style>
</head>
<body>
	<dl>
		<dt>3月11日</dt>
		<dd>アパートの賃貸契約をする。</dd>
		<dt>3月13日</dt>
		<dd>借りていた本を図書館に返す。</dd>
		<dd>大阪旅行に行く。</dd>
		<dt>3月15日</dt>
		<dd>大阪旅行から帰る。</dd>
	</dl>
</body>
</html>

見出しを揃えない場合

dt要素の横幅関係なしに横並びにします。例えば、リンクと説明のペアを表示するのによいでしょう。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
dt {
	float: left ;
}

dt::after {
	margin: 0 8px ;
	content: "-" ;
}

dd {
	margin: 0 ;
}

/*safari用 */
dt, dd {
	min-height: 24px ;
	line-height: 24px ;
}
	</style>
</head>
<body>
	<dl>
		<dt><a href="https://www.google.co.jp/" target="_blank">Google</a></dt>
		<dd>最大手の検索エンジン。私は1日に何回アクセスしているだろうか。</dd>
		<dt><a href="https://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a></dt>
		<dd>検索エンジンというよりはニュースサイトとして利用しています。</dd>
		<dt><a href="https://duckduckgo.com/" target="_blank">DuckDuckGo</a></dt>
		<dd>ユーザーのプライバシーを守ることに主眼が置かれた検索エンジン。日本での利用率がどれくらいなのか気になります。</dd>
	</dl>
</body>
</html>
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月22日 (木)
コンテンツを公開しました。