【CSS】dt ddの横並び サンプル

dt ddの定義リストを横並びにするHTMLとCSSのサンプルです。

◆HTML

<dl class="sample">
<dt>テキスト</dt>
<dd>テキストテキストテキストテキストテキスト<br />テキストテキストテキストテキストテキスト</dd>
<dt>テキスト</dt>
<dd>テキストテキストテキストテキストテキスト<br />テキストテキストテキストテキストテキスト</dd>
<dt>テキスト</dt>
<dd>テキストテキストテキストテキストテキスト<br />テキストテキストテキストテキストテキスト</dd>
</dl>

◆CSS

dl.sample dt {
width: 100px;
float: left;
clear: both;
}

dl.sample dd {
margin: 0 0 10px 120px;
overflow: hidden;
zoom: 1;
}

実際のサンプルページはこちら

dtのwidth指定と、ddのmargin-leftをうまく調整するとうまくいきます。