「dt」「dd」の内容を一列で表示させる方法を教えてください。

質問

はじめまして。
CSSで作成しているんですが、よく「dl」「dt」「dd」を使って一列に

日付　　○○○○○○

というのを見かけるんですが、やり方がわからず困っています。
どうすればいいのでしょうか？

また、「dl」を使うと「p」のように上下？に大きな空白が出来てしまうんですが、これを回避する方法はありますでしょうか？

といいますか、よく見かけるものでは空白などできておらず、むしろ行間に画像を入れて小さな空白を作っているように思うんですが・・・
こちらも合わせて教えていただけると幸いです。

どうかよろしくお願いいたします。

回答No.8

noname#56882 · ベストアンサー

#5、#6です。お返事が遅くなりまして申し訳ありません。
.box-aの中にあるmargin-top: 30px;と#rightの中にあるmargin-top: 10px;が
上部に○○px分の余白を取っていることになります。

<div class="box-a">
<div class="day">
<dt>2007.11.12</dt>
<dd>○○○○○○○○</dd>
<dt>2007.11.12</dt>
<dd>○○○○○○○○</dd>
</dl>
</div>
</div>

と書いてしまうと30px分の余白が出来てしまうのです。
「margin-top: 30px;」を取るとその余白は出来なくなると思いますよ。

> firefoxだと2行分までとはいかないまでも空白がありました。
.day dl{
margin: 0px;
padding: 0px;
width: 330px;/*幅（任意ですがdtとddのwidth＋margin30pxの合計になるようにしてください）*/
}
.day dt{
clear: both;
float: left;
width: 80px;/*日付の幅（任意）*/
padding: 1px;/*文字周りの余白（表記しなくてもいいです）*/
}
.day dd{
width: 200px;/*テキストの幅（任意）*/
margin: 0 0 0 30px;/*日付とテキスト間の幅（30px分幅を取っています）*/
padding: 1px;/*文字周りの余白（表記しなくてもいいです）*/
}

と表記すると余白が少なく表示されると思います。

お礼

ありがとうございます！

早速試してみます！
私ももっと勉強して、教えれるぐらいになりたいです・・・

回答No.7

CHI-512

こんにちは。
横から失礼します。
こんなソースはいかがでしょう？

.box-a {
zoom: 100%;
}
.box-a:after {
content: " ";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
.box-a dl {
margin: 0px;
padding: 0px;
}
.box-a dt {
float: left;
clear: left;
width: 100px;
}
.box-a dd {
margin-left: 130px;
}

<div class="box-a">
<dl>
<dt>タイトル</dt>
<dd>あいうえおあいうえお</dd>
<dt>タイトル</dt>
<dd>あいうえおあいうえお<br />あいうえおあいうえお<br />あいうえおあいうえお</dd>
<dt>タイトル</dt>
<dd>あいうえおあいうえお</dd>
</dl>
</div>

参考になれば幸いです。

回答No.6

noname#56882

#5です。
<div class=box-a>はのCSS記述はどのようにされていますか？
（正しい指定は<div class="box-a">です。「"」を忘れないようにしてくださいね）
それを書いてくださると何故起きるのかわかるかもしれません。

<div class="box-a">を一度削除して#5で記述した通りにされてみてはどうでしょうか？

お礼

深夜遅くの度重なる回答、本当にありがとうございます。

box-aについてですが
.box-a {
width: 550px;
height: 250px;
float: left;
margin-top: 30px;
background-image: url(img/info-bg.gif);
background-repeat: no-repeat;
}

としています。

試しにbox-aを消してみましたがやはり同じような現象が起きました。
ちなみにさらにdiv id="right"で囲んでいるんですがこちらは
#right {
width: 550px;
margin-left: 15px;
margin-top: 10px;
height: 280px;
background-repeat: no-repeat;
background-image: url(img/infomation.gif);
}

となっています。
ひょっとするとこちらが原因でしょうか？

難しいです・・・

補足

何度もすみません。

たった今ブラウザで確認したところ、上の空白はなくなっていました！
ただ、firefoxとIEだと見え方か少し異なってくるんですね・・・

IEだと隙間なく表示されるんですが、firefoxだと2行分までとはいかないまでも空白がありました。

できれば間をとった距離が欲しいんですが（笑

本当難しいです・・・

回答No.5

noname#56882

試しに書いてみましたが…。ご参考までにお願い致します。

CSS部分例

.day dl{width: 330px;/*幅*/}
.day dt{clear: both;
float: left;
width: 80px;/*日付の幅*/
padding: 2px;/*文字周りの余白*/}
.day dd{width: 200px;/*テキストの幅*/
margin: 0 5px 0 30px;/*日付とテキスト間の幅（30px分幅を取っています）*/
padding: 2px;/*文字周りの余白*/}

html部分例

<div class="day">
<dl>
<dt>2007.11.12</dt>
<dd>○○○○○○○○</dd>
<dt>2007.11.12</dt>
<dd>○○○○○○○○</dd>
</dl>
</div>

> 「p」のように上下？に大きな空白が出来てしまうんですが
これは今回では「padding」で文字の周りに小さな余白を作っています。
ご参考になりましたら幸いです。

お礼

ありがとうございます！

これを見て何となくですが、クラスについて一歩前進したような気がします・・・

一度自分のファイルに移して返信しながら研究してみたいと思います、
本当にありがとうございました！

補足

早速やってみました！

一行にやるやり方は、おかげ様でばっちりできたんですが、空白についてやはりできませんでした・・・

ちなみに空白というのは「dl」タグの上の部分がどうしても改行2行分ほど空いてしまうのです。

<div class=box-a>
<div class=day>
<dl>・・・・・

としたんですがなぜか始まりの日付の部分がbox-aの改行2行分下から始まってしまいます。
padding30px分くらいあいて始まってしまいます。

ここの空白部分を調節したいんですが・・・
もしご存知でしたらどうかよろしくお願いいたします。

何度もすみません・・・

回答No.4

Phoebastria

outbraveさんが全部答えを書いてくれたみたいですが、
「float:leftということは、「dt」「dd」をdivで囲って、やるということでしょうか」
と聞くあたりCSSについてあまり理解なされていませんね？
divを使う必要はありませんよ。一度リファレンスなどを購入なさってみてはいかがでしょうか。
セレクタやプロパティなど基本的なことを理解しておいた方が後々壁にぶつかることがなくなります。
ちなみにflortでもinlineでもどっちでも可能です。場合によって使い分けてください。

偉そうに書いてみましたが、私も勉強中の身です。
お互い頑張りましょう。

お礼

セレクタやプロパティ。。。

ほんと何も分かってないです（汗
ひとまずなんでもdivで囲って作っています。

一度ちゃんと勉強してみます！

本当にありがとうございました。

回答No.3

outbrave

dl {
margin: 0;
}
上下の間隔は、margin で調整できます。

回答No.2

outbrave

dt, dd {
display: inline;
margin: xxxx;
padding: xxxx;
}

ブロックをインラインに変更すればよいかと。

お礼

ありがとうございます。

インライン・・・まだまだ勉強が必要です。

ありがとうございました。

回答No.1

Phoebastria

float: left;でなりませんか？

あと空白はCSSで制御していないからでは？

お礼

ありがとうございます。

float:leftということは、「dt」「dd」をdivで囲って、やるということでしょうか？

CSSの制御方法なども教えていただけると幸いです。

どうかよろしくお願いいたします。