ID:uE82y1bSlwwp さんの質問

33,485 views

横並びにした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を使わずに揃えたいのですが、他にいい方法はありますか?

登録日:2014-08-21 · カテゴリー:HTML・CSS

みんなの回答 5 件

2014-08-21 · ID:T50h8O0cusXw 報告

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

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

http://liginc.co.jp/web/js/jquery/22340
2014-08-21 · トピ主 報告

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

2014-08-21 · コメ主 報告

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

2014-08-21 · ID:oRCtBRQoy.YB 報告

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

2014-08-21 · トピ主 報告

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

2014-08-21 · ID:jP5BV3dKhNHx 報告

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

CSS · Bootstrap

http://getbootstrap.com/css/#type-lists
2014-08-21 · トピ主 報告

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

2014-08-21 · ID:WQ/dknmJbFeH 報告

こうやればできるんじゃないかしら。坊や。
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;
}

2014-08-22 · トピ主 報告

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

2014-08-22 · ID:tU1e.rrOE.l7 報告

トピ内容のテキストなら定義リストが妥当だろうね。
単に見た目を表っぽくしたいってだけじゃないか?
これくらいなら、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推奨。

2014-08-22 · ID:CWzj7mRIHkzw 報告

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

2014-08-22 · トピ主 報告

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

2014-08-22 · コメ主 報告

あ、確かにmarginだと下線が端まで上手く引かれないか。
margin: 0 0 0 6em;

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

2014-08-22 · コメ主 報告

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

2014-08-22 · ID:CWzj7mRIHkzw 報告

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

2014-08-22 · コメ主 報告

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

2014-08-22 · ID:kwnKV4tNFqSl 報告

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

回答の受付は終了しました。

関連トピック