dl内のdt要素やdd要素を横に並べる方法です。
HTML
1 | <dl class="sampleList"> |
2 | <dt>dt要素です。</dt> |
3 | <dd>dd要素です。サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</dd> |
4 | <dt>dt要素です。</dt> |
5 | <dd>dd要素です。サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</dd> |
6 | </dl> |
CSS
01 | dl.sampleList { |
02 | overflow: hidden; |
03 | zoom: 1; |
04 | } |
05 | dl.sampleList dt { |
06 | width: 100px; |
07 | float: left; |
08 | clear: both; |
09 | font-weight: bold; |
10 | } |
11 | dl.sampleList dd { |
12 | padding: 0 0 5px 120px; |
13 | } |
注意点として、dt要素に横幅を指定することと、dd要素にその横幅と同じ値のmargin-left、あるいはpadding-leftを指定することです。これを怠ると、表示が崩れてしまいます。
活用方法としては、日付入りの新着情報を入力する際のリストなどに使えます。以下にサンプルを掲載します。
HTML
1 | <dl class="sampleList02"> |
2 | <dt>2010/01/01</dt> |
3 | <dd>新着情報です。</dd> |
4 | <dt>2010/01/01</dt> |
5 | <dd>新着情報です。</dd> |
6 | </dl> |
CSS
01 | dl.sampleList02 { |
02 | overflow: hidden; |
03 | zoom: 1; |
04 | } |
05 | dl.sampleList02 dt { |
06 | margin-bottom: 5px; |
07 | padding-bottom: 5px; |
08 | width: 100px; |
09 | float: left; |
10 | clear: both; |
11 | font-weight: bold; |
12 | } |
13 | dl.sampleList02 dd { |
14 | margin-bottom: 5px; |
15 | padding: 0 0 5px 120px; |
16 | border-bottom: 1px dotted #999; |
17 | } |
dl要素で横並びのリストを作る際は活用してみてください。
