-
ID:uE82y1 さんの質問

横並びにしたdtとddの高さがそろわなくて困っています。
ーーー　HTML　ーーー
<dl>
　　<dt>お名前</dt>
　　　<dd>じゅげむ</dd>
　　<dt>分類</dt>
　　　<dd>質問</dd>
　　<dt>内容</dt>
　　　<dd>ちょっとわからないことがあるんですが…〜…よろしくお願いします</dd>
</dl>

ーーー　CSS　ーーー
dl {width: 500px;}

dt {width: 99px;
float: left;
clear: left;
background: #ccc;
border-bottom: solid #999 1px;
border-right: solid #999 1px;}

dd {width: 400px;
margin: 0 0 0 100px;
background: #666;
border-bottom: solid #999 1px;}

上記のような構成のものを、表のように並べたいと思っています。
dtは増減することはなく、ddが可変になるため、ddの高さに揃えてdtの高さを揃えたいです。
上記の書き方でできなかったので、dlにdisplay: table;、dtとddにdisplay:table-cell;を入れてみたのですが、dlの上下に不要なマージンが入ってしまい（margin: 0 0;にしても消えませんでした）ダメでした。

なるべくJSを使わずに揃えたいのですが、他にいい方法はありますか？

みんなの回答 5 件

ID:T50h8O さんの回答

tableレイアウトにするのが一番良いかと。
もしくは、heightline.jsを使ってみてはどうでしょう。

見た目を綺麗に整列する！ブロックレベル要素の高さを揃えるJS3選 | 株式会社LIG

http://liginc.co.jp/web/js/jquery/22340
ID:uE82y1

やはりJS使ったほうが確実ですかね…。
回答ありがとうございます。

ID:T50h8O

tableにかえてもいいのであればtableで済ませるのが利口だと思いますが、
なにか理由があって定義リストにしているのであれば、ぜひこのjsを使ってみてはどうでしょう。一番使いやすいと思います。

ID:oRCtBR さんの回答

表ならテーブルでいいんじゃん。
なんで無理に定義リストにするのか。
定義リストにしちゃうとのちのち<dt>部分がなしのコンテンツとか入ってきちゃうと文法間違いになっちゃうよ。
ID:uE82y1

例がいけてないのですが、定義リストとして適切な文章構造になっているので、定義リストを使っているみたいです。
dtがなしになることもないですし…。
レイアウトとして揃えたいと思っているだけなので、レイアウトのためだけにテーブルにするのも違う気がします…。

ID:jP5BV3 さんの回答

Bootstrapのdl.dl-horizontal解析してみたら？

CSS · Bootstrap

http://getbootstrap.com/css/#type-lists
ID:uE82y1

ありがとうございます。
これは使ったことがなかったのですが、せっかくの機会なので、使ってみます。

ID:WQ/dkn さんの回答

こうやればできるんじゃないかしら。坊や。
dl {
width: 500px;
border: 1px solid #999;
border-top: 0;
line-height: 1.5;
background-color: #666;
overflow: hidden;
}
dt {
float: left;
width: 130px;
padding: 10px;
border-top: 1px solid #999;
font-weight: bold;
}
dd {
margin-left: 150px;
padding: 10px;
border-top: 1px solid #999;
border-left: 1px solid #999;
background-color: #ccc;
}
ID:uE82y1

ddがちょっと下がっていたので、ddにmargin-top: -24px;を入れたらぴったりになりました！
ddの中身が増えても、dtもきちんと伸びますね。
ありがとうございます。素晴らしいです、奥様。

ID:tU1e.r さんの回答

トピ内容のテキストなら定義リストが妥当だろうね。
単に見た目を表っぽくしたいってだけじゃないか？
これくらいなら、JS使わなくてもいけるよ。

dl {}
dt {
clear: both;
float: left;
width: 5em;
background: #ccc;
}
dd {
margin: 0 0 0 6em;
background: #666;
border-bottom: solid #999 1px;
border-left: solid #999 1px;
}

※ddにはfloat,width等指定しないのがポイント。単位も出来ればem推奨。
ID:CWzj7m

なんでコレでうまく行くのですか？

ID:uE82y1

むむー…こちらはうまくいかず…。
display: inline-blockとかはいらないんですかね…。
inline-blockにしてもdtの背景がdtの文字列分しかつかないので、変えないといけないんですが…。

ID:tU1e.r

あ、確かにmarginだと下線が端まで上手く引かれないか。
margin: 0 0 0 6em;
↓
padding: 0 0 0 6em;
.
これに変更すると、ddのbackgroundがdtの上まで被ってくるはずだから、
background-colorは全部消して、替わりにdlに縦区切りborder付きの画像をbackgroundに縦リピで設定して置くといいよ。

ID:tU1e.r

ちなみにinline-blockはいらないよ。

ID:CWzj7m

ddにfloatを付けないってどういう意味になるんですか？

ID:tU1e.r

ddにfloatを付けないことで、敢えて前の要素に被るように持って行くということを意図してやる感じかな。そうすることでddをpadding指定で調整すれば、border-bottom/topを指定する場合も一列で引くことが出来る。
他にはddが可変が可能なのと、emで作っておけば文字サイズの変更に耐えうるのが主な利点。
トップページのお知らせのリストみたいな、dt,ddの並列組みにはよくやる手法。あとは画像に対するテキストの回り込み等でも使える。

ID:kwnKV4

勉強になりました！ありがとうございます！

最終更新日:2014-08-22 (55,395 views)

関連するトピックス

ページ上部に戻る