はじめまして。現在、いわゆる新着情報の箇所を日付詳細詳細詳細詳細詳細詳細詳細詳細詳細詳細詳細詳細のように書いているのですが、が2行構成になったときどうしても2行目からの下側に回り込んでしまいます。にfloatはどうしても1行で書きたいからつけているのですが、これを解決する方法はありますでしょうか？わかりにくいかもしれませんが、どうかよろしくです。

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

解決済

質問者：biwanoha
質問日時：2008/12/14 17:03
回答数：5件

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： ORUKA1951
回答日時：2008/12/15 16:27

　定義リストで書かれている更新履歴・新着情報を幅の固定されたボックス内に整列させて表示させる方法ということで。

　確かに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;
}