※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

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の方の長さを指定すればできます。構造上問題はないと思います。(文法チェックしてみたがエラーはなかった)

以上

添付ファイル