CSSと<dl><dd>で間隔をあけて1行でテキストを表示する方法

質問

はじめまして。
今CSSを勉強中のものです、よく<dl>と<dd>、<dt>タグを使って、

○○○　　　　　□□□□□
×××　　　　　△△△△△△△△
　　　　　　　　△△△△△△△△

のようなレイアウトで一行目をそろえて表示したいのですが、やり方がわかりません・・・
なんとか右の部分のmargintopをマイナスにして同じ行にはできるのですが、左の部分が少し長いと右と左の文字がかぶってしまいます。

できればmargintopをマイナスで指定する方法などもかなり無理やりのような気がするので同時にもっとスマートな方法を教えていただけると助かります。

以上2点になりますがどうかよろしくお願いいたします。

参考サイトです。
http://www.cyberagent.co.jp/company/data/index.html「会社概要」
http://www.fisco.co.jp/「新着情報」

回答No.1

leap_day · ベストアンサー

こんにちは

上のサイトのほうは外部css、下のサイトのほうはtale組みのようですのであってるかどうかは分かりませんが・・・

こんな感じ?

<style type="text/css"><!--
dl {
width:500px;
clear:both;
margin:0px;
}
dt {
clear:both;
width:150px;
float:left;
margin:0px;
}
dd {
width:340px;
float:right;
margin:0px;
}
--></style>

<dl>
<dt>ああああああああああ</dt>
<dd>いいいいいいいいいいい</dd>
<dt>うううううううううううううううううう</dt>
<dd>ええええええええええええええええええ</dd>
</dl>

<dl>
<dt>おおおお</dt>
<dd>かかかかかか</dd>
<dd>ききき</dd>
<dd>くくくくく</dd>
</dl>

<dl>
<dt>けけけ</dt>
<dd>こここ</dd>
</dl>

※2段目、3段目のように2行以上になるときは</dl>で一度切らないと表示が異なります
参考サイトはそのまま続けてあるみたいですけどちょっと分からないですね（＞＜）height指定でもしてるのかな?

お礼

ありがとうございます。
早速試してみます！

返事が遅くなりましたが本当にありがとうございました！

回答No.2

grumpy_the_dwarf

dl compactが使えるといいんですけどねぇ。

DIV.desc dt {
float: left;
text-align: right;
width: 120px;
}

DIV.desc dd {
clear: right;
margin-left: 130px;
}

でもうまくいってるように見えます。

参考URL：

http://www.med.yamanashi.ac.jp/~cmr/announce/2005.php

お礼

dlcompact・・・

それも知らない私は明らかに勉強不足ですね・・・
回答ありがとうございます！

参考URL見ましたがぱっと見た感じでは手がかかってなさそうなのに・・・ちゃんとCSSを使っているんですね・・・

まだまだ勉強不足です！
本当にありがとうございました！