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

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

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

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

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

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

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

No.1 ベストアンサー 回答者： leap_day 回答日時： 2007/09/24 10:19

こんにちは

上のサイトのほうは外部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指定でもしてるのかな?

この回答へのお礼

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

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

お礼日時：2007/09/24 21:32

No.2 回答者： grumpy_the_dwarf 回答日時： 2007/09/24 18:55

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/200 …

この回答へのお礼

dlcompact・・・

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

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

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

お礼日時：2007/09/24 21:34