liタグの中にdtとddが入っており、ddが複数ある際にddが改行された際にもddの一つ目のインデントに合わせたい場合どうすればよいでしょうか。7月14日記事
イメージ
うわぁ。カルボ
ラーナ
になってる・・・・。ご了承ください。
目次
おそらく検索してきてくれた方は次のようなイメージをもっているのではないでしょうか？
<ul> <li><dl><dt>大分類1</dt><dd>小分類1</dd><dd>小分類2</dd><dd>小分類3</dd></dl></li> <li><dl><dt>大分類2</dt><dd>小分類1</dd><dd>小分類2</dd><dd>小分類3</dd></dl></li> <li><dl><dt>大分類3</dt><dd>小分類1</dd><dd>小分類2</dd><dd>小分類3</dd></dl></li> </ul>
これでは、
対応できません。
ulタグのCSSは長さを指定できたりするので、ulタグをdd内にもってくるようにします。
<dl> <dt>大分類1</dt><dd><ul><li>小分類1</li><li>小分類2</li><li>小分類3</li></ul></dd> <dt>大分類2</dt><dd><ul><li>小分類1</li><li>小分類2</li><li>小分類3</li></ul></dd> <dt>大分類3</dt><dd><ul><li>小分類1</li><li>小分類2</li><li>小分類3</li></ul></dd> </dl>
わかりやすいように色を付けておきました。
HTML部
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>メニューリスト</title>
</head>
<body>
<div id="menu">
<dl>
<dt>パスタ</dt>
<dd>
<ul>
<li>カルボラーナ</li>
<li>ペペロンチーノ</li>
<li>トマトクリームパスタ</li>
</ul>
</dd>
<dt>ピザ</dt>
<dd>
<ul>
<li>モッァレラピザ</li>
<li>サラミのピザ</li>
<li>ブロッコリーのピザ</li>
<li>ベーコンピザ</li>
<li>アンチョビのピザ</li>
<li>アスパラガスのピザ</li>
</ul>
</dd>
<dt>デザート</dt>
<dd>
<ul>
<li>アイスクリーム</li>
<li>シャーベット</li>
<li>ティラミス</li>
<li>プリン</li>
</ul>
</dd>
</dl>
</div>
CSS部
@charset "utf-8";
/* CSS Document */
*{
font-size:18px;
}
#menu{
margin: 10px auto;
width: 800px;
height: 180px;
border: 1px solid #000;
}
#menu dt{
float:left;
clear:both;
width: 100px;
background: #f00;
text-align:center;
padding: 9px 9px;
margin:3px;
}
#menu dd{
float:left;
background: #EEEEEE;
}
#menu ul{
width:600px;
}
#menu li{
display:inline-block;
padding: 9px 9px;
margin:3px;
background: #FF0;
}
ulタグの幅を指定し、liの方はdisplay:inline-block;にするか、display:inline;+white-space:nowrap;にするかはどちらでもいいです。
ddが複数ある場合、長さを指定できないので、dlとulの構造を逆にして、ulの方の長さを指定すればできます。構造上問題はないと思います。（文法チェックしてみたがエラーはなかった）
以上
