ここから本文です

liタグの中の複数のddに対してddが折り返されたあと、折り返したdd要素がはじめのd...

jub********さん

2015/7/1314:21:04

liタグの中の複数のddに対してddが折り返されたあと、折り返したdd要素がはじめのddと同じインデント位置にもってきたい。

方法を模索しています。

HTML
<body>
<div id="menu">
<ul>
<li>
<dl>
<dt>卵料理</dt>
<dd>スクランブルエッグ</dd>
<dd>目玉焼き</dd>
<dd>卵焼き</dd>
<dd>ゆで卵</dd>
</dl>
</li>
<li>
<dl>
<dt>肉料理</dt>
<dd>ステーキ</dd>
<dd>ハンバーグ</dd>
<dd>スペアリブ</dd>
<dd>肉料理1</dd>
<dd>肉料理2</dd>
<dd>肉料理3</dd>
</dl>
</li>
</ul>
</div>
</body>
CSS
#menu{
margin: 10px auto;
width: 800px;
height: 300px;
border: 1px solid #000;
}
#menu li{
height: 30px;
list-style:none;
float:left;
clear:left;
}
#menu dt{
float:left;
clear:left;
width: 100px;
background: #f00;
}
#menu dd{
float:left;
padding: 0px 5px;
background: #EEEEEE;
}

このようなレイアウトにすると、料理3が肉料理の下にきてしまいます。ステーキの左開始位置と同じ位置に折り返されたddをもってきたいのです。ddのwidthも複数あるため、指定できないですし、何かよい方法ありますでしょうか?

閲覧数:
211
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

hei********さん

2015/7/1319:10:31

提案。

dd 要素内にはブロック要素を入れれます、例えば ul 要素を入れると ul 要素内で折り返すことができます。

<dl>
<dt>肉料理</dt>
<dd>
<ul>
<li>ステーキ</li>
<li>ハンバーグ</li>
<li>スペアリブ</li>
<li>肉料理1</li>
<li>肉料理2</li>
<li>肉料理3</li>
</ul>
</dd>
</dl>

li {
display: inline;
}

質問した人からのコメント

2015/7/13 20:41:37

ご返信ありがとうございます。
なるほどと思って実装してみました。
ulに適当なwidthを指定し、liをinlineにしました。
すると、liの中の文字が最後までくると文字の途中であれば、文字が改行されてしまい2行にわたってしまいました。

そこでulのwidthを微調整し、折り返し位置にwidthをあわせたところ無事できました。
ありがとうございました。

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる