ddタグを上手に使うには？

質問

はじめまして。
現在、いわゆる新着情報の箇所を
<dl>
<dt>日付</dt>
<dd>詳細詳細詳細詳細詳細詳細詳細詳細詳細詳細詳細詳細</dd>
</dl>

のように書いているのですが、<dd>が2行構成になったときどうしても2行目から<dt>の下側に回り込んでしまいます。
<dt>にfloatはどうしても1行で書きたいからつけているのですが、これを解決する方法はありますでしょうか？

わかりにくいかもしれませんが、どうかよろしくです。

回答No.5

ORUKA1951 · ベストアンサー

定義リストで書かれている更新履歴・新着情報を幅の固定されたボックス内に整列させて表示させる方法ということで。
　確かにtableよりは、定義リストでマークアップするほうが良いでしょう。

<dl id="news">
<dt>2008/12/15</dd>
<dd>プロジェクトチームが病院などを視察（14:22）</dd>
<dd>ネット販売していた無職男7人逮捕（13:50）</dd>
<dt>2008/12/14</dt>
<dd>大勢のファンが詰めかける（23:54）</dd>
<dd>和解案に合意（21:06）</dd>
</dl>
このようにマークアップされていたとします。リンクは記述してない。
★本来は、display: run-in などを使用すべきだが対応していないブラウザが多い。この場合も流し込まれる。
★floatを使用する
★dd幅を固定し、長いときは折り返されること。
dl#news{
display: block;
width: 300px;
border: ridge 4px blue;
padding: 0.5em 0.5em;
}
dl#news dt{
float: left;
width: 6em;
}
dl#news dd{
margin-left: 6.5em;
text-indent: -1em;
font-size: 0.9em
}
dl#news dd:before{
content: "●";
font-weight: blod;
color: red;
}

回答No.4

noname#100277

何故ddに拘るのでしょうか？
見栄え？
１と同じくtableの方が内容からして相応しい気がします。
但し「複数」記述が前提ですが。
又、自動改行されるのが嫌と云ってますが、閲覧者のディスプレイやブラウザの事を考えてるのでしょうか？
考えたら自動改行させるのが常道なのですがね。

回答No.3

grumpy_the_dwarf

要するに古代の<DL COMPACT>みたいなことをしたくてDT要素を
floatしているのなら、参考URLをご覧ください。insetなborderで
囲まれた部分が該当します。

もちろん他にもいろんな手口はありますけどね。

参考URL：

http://www.med.yamanashi.ac.jp/~cmr/

回答No.2

noname#83877

dd {white-space:pre;}
を追加すれば改行はされなくなりますが、けっきょく枠外に出たときの対処が必要になります。

回答No.1

Tacosan

こういうものこそ table で書けばいいと思うんだけどなぁ....