お世話になります。
dtが1つ、その下に複数のddが並ぶリストのCSSで行き詰まっています。
例えば
HTML
1<dl> 2 <dt>夏と言えば</dt> 3 <dd>かき氷</dd> 4 <dd>海水浴</dd> 5 <dd>オオクワガタ</dd> 6 <dd>夏休み</dd> 7 <dt>冬と言えば</dt> 8 <dd>大雪</dd> 9 <dd>冬期うつ</dd> 10 <dd>燃料費高騰</dd> 11 <dd>スリップ事故</dd> 12 <dd>センター試験</dd> 13 <dd>日照不足</dd> 14 <dd>忘年会</dd> 15</dl>
というリストがあり、dtとddが横並びになるように
CSS
1dl{ 2} 3dl dt{ 4 display:block; 5 width:120px; 6 height:240px; 7 border:0; 8 margin:0; 9 padding:0; 10 float:left; 11 clear:left; 12 font-weight:bold; 13} 14dl dd{ 15 display:block; 16 float:left; 17 border:0; 18 margin:0; 19 padding-left:20px; 20}
のようなCSSを書けば、複数個のddを横並びに表示することができますが、dtのheightを固定しているため、ddの個数によってはやたら下の空白が大きくなってしまったり、逆に下の方のddがdtの真下にはみ出てしまったりします。かといって、dtのheightをautoにしたり指定を外したりすると、ddが2行以上の時はdtの真下にはみ出ます。
dtとddが共に1つずつの場合、dtに float:leftとclear:leftを指定+ddのmargin-leftを相応に指定すればよいようですが、ddが複数になるとお手上げです。
divで左右に分けてdt→h4、dd→liにするのも考えましたが、負けを認めたような気がしてならないです。
良いアイデアがあれば、ご紹介いただけると嬉しいです。
1点書き忘れたので追記です。
複数のdd「も」横並びにしたいと思っております。
回答1件
あなたの回答
tips
プレビュー