ddが複数あって、かつdtとddが横並びのリスト

Question

お世話になります。

dtが1つ、その下に複数のddが並ぶリストのCSSで行き詰まっています。
例えば

<dl>
	<dt>夏と言えば</dt>
		<dd>かき氷</dd>
		<dd>海水浴</dd>
		<dd>オオクワガタ</dd>
		<dd>夏休み</dd>
	<dt>冬と言えば</dt>
		<dd>大雪</dd>
		<dd>冬期うつ</dd>
		<dd>燃料費高騰</dd>
		<dd>スリップ事故</dd>
		<dd>センター試験</dd>
		<dd>日照不足</dd>
		<dd>忘年会</dd>
</dl>

というリストがあり、dtとddが横並びになるように

dl{
}
dl dt{
	display:block;
	width:120px;
	height:240px;
	border:0;
	margin:0;
	padding:0;
	float:left;
	clear:left;
	font-weight:bold;
}
dl dd{
	display:block;
	float:left;
	border:0;
	margin:0;
	padding-left:20px;
}

のような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「も」横並びにしたいと思っております。

Comments

[kei344]

追記部分についてもう少し詳しく記述してください。

[Cystidia]

言葉足らずで申し訳ありません。ddが複数あるとき、これらを縦1列に並べるのではなく、横に(例えば1行に4つとか)並べていきたいということです。

Answer 1

dl {
	padding-left: 6em;
}
dl dt,
dl dd {
	float: left;
	margin: 0;
}
dl dt {
	clear: left;
	float: left;
	margin-left: -6em;
}
```**動くサンプル：**[https://jsfiddle.net/yvf21u4c/](https://jsfiddle.net/yvf21u4c/)

Comments

[Cystidia]

ありがとうございます！
これならddが複数あって、かつ複数行になっても横並びになりました。

早速実装してみたのですが、1点新たな問題が出てしまいました。
ddに横幅指定がない(widthもpaddingもつけない)場合はこれでよいのですが、dd間の見栄えを整えるために何らかの方法で横幅を指定すると、1行目(=dtと並んでいる行)のみ、インデントがかかったように(かけてません)ddの項目が右にずれてしまいます。
先程頂いたjsfiddleのサンプルを、上記のように編集しました。

[Cystidia]

自己レスです。
本番のCSSに同じコードを書いたら、上手くいきました！！
先程の「新たな問題」は、なかったことにして下さい。