dt ddがどうやってもそろわない

Question

dt dd タグでメニュー表みたいなものを作っているんですがdtのところがどうしても長くなります。長い分は改行で表示したいと思っているんですがddが上につまってしまってきれいに揃いません。
何か方法があるでしょうか？今のソースは下記のような感じです。

<style type="text/css"><!--
dt{ 
width:200px;
border-bottom:1px solid #ccc;
float:left;
clear:both;
}
dd{ 
width:500px;
margin-left:200px;
border-bottom:1px solid #ccc;

}
--></style>


<dl>
<dt>長い項目長い項目長い項目長い項目<dt>
<dd>380円</dd>
<dt>短い項目<dt>
<dd>380円</dd>
<dt>長い項目長い項目長い項目長い項目</span><dt>
<dd>420円</dd>
<dt>短い項目<dt>
<dd>380円</dd>
<dt>短い項目<dt>
<dd>380円</dd>
</dl>

Answer 1

まず一番まずいのは<dt>のとじタグがなくもう一度<dt>が記載されていること
これはdtタグのあとに空のdtタグが置かれている状態。
なにをやってもずれるでしょう。

CSSだけでどうしても高さをあわせないといけない場合は
dt+ddごとにdlを置くことです。

プログラムで処理していいならたとえばjQueryでこう

dt{ 
display:block;
width:200px;
float:left;
clear:left;
border-bottom:1px solid #ccc;
}
dd{ 
width:500px;
display:block;
border-bottom:1px solid #ccc;
}

$(function(){
  $('dt').each(function(){
    $(this).next('dd').height($(this).height());
  });
});

<dl>
<dt>長い項目長い項目長い項目長い項目</dt>
<dd>380円</dd>
<dt>短い項目</dt>
<dd>380円</dd>
<dt>長い項目長い項目長い項目長い項目</span></dt>
<dd>420円</dd>
<dt>短い項目</dt>
<dd>380円</dd>
<dt>短い項目</dt>
<dd>380円</dd>
</dl>

Answer 2

dlに幅指定してあげれば良いです。

私なり、作ってみたところ、「float:left;」や「clear:left;」にするより、「display: flex;」にした方が良いです。

私が作ったコードは、質問者が掲示したhtmlコードをもとにCSSを作りました。
その前にhtmlコードに

<dt>長い項目長い項目長い項目長い項目</span><dt>

↑
</span>が残っていますので、削除してください。

CSSは、

dl {
  display: -ms-flexbox; /* IE10 */
  display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
  display: -webkit-flex; /* Safari6.1以降 */
  display: flex;
  -ms-flex-wrap: wrap; /*IE10*/
  -webkit-flex-wrap: wrap; /* Safari6.1以降 */
  flex-flow: wrap;
  width: 550px;
  margin: 20px auto;
}

dt, dd {
  border-bottom: 1px solid #ccc;
}

dt {
  width: 200px;
  margin-right: 0;
  padding-left: 3em;
}

dd {
  width: 100px;
  margin-left: -50px;
}

Answer 3

dlに幅指定してあげれば良いです。

私なり、作ってみたところ、「float:left;」や「clear:left;」にするより、「display: flex;」にした方が良いです。

私が作ったコードは、質問者が掲示したhtmlコードをもとにCSSを作りました。
その前にhtmlコードに```

<dt>長い項目長い項目長い項目長い項目</span><dt> ```←</span>が残っていますので、削除してください。

CSSは、

dl {
  display: -ms-flexbox; /* IE10 */
  display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
  display: -webkit-flex; /* Safari6.1以降 */
  display: flex;
  -ms-flex-wrap: wrap; /*IE10*/
  -webkit-flex-wrap: wrap; /* Safari6.1以降 */
  flex-flow: wrap;
  width: 550px;
  margin: 20px auto;
}

dt, dd {
  border-bottom: 1px solid #ccc;
}

dt {
  width: 200px;
  margin-right: 0;
  padding-left: 3em;
}

dd {
  width: 100px;
  margin-left: -50px;
}