0

子ulを持つliはdisplay：inlineであることに注意してください-次のようなコード例

<style type="text/css">
ul.nav_main li { display: inline }
ul.nav_submenu li { display: block }
</style>

<ul class="nav_main">
    <li>Item 1
        <ul class="nav_submenu">
            <li>Option 1</li>
            <li>Option 2</li>
        </ul>
    </li>
</ul>
4

3 に答える 3

2

CSSはHTMLソースの有効性に影響を与えません。ただし、ブラウザはULをインライン要素内に配置するために最善を尽くすため（有効であっても）、予期しない結果が生じる可能性があります。

とにかく、あなたはいつでもそれを自分でチェックすることを歓迎します

于 2012-04-14T10:54:02.310 に答える
1

XHTML1.0に問題はありません。確認したい場合は、W3Cバリデーターを使用できます：http： //validator.w3.org/check

そのため、ダミーページが必要です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css" media="all">
ul.nav_main li { display: inline }
</style>
</head>
<body>
<ul class="nav_main">
    <li>Item 1
        <ul class="nav_submenu">
            <li>Option 1</li>
            <li>Option 2</li>
        </ul>
    </li>
</ul>
</body>
</html>

W3Cバリデーターにエラーはありません

于 2012-04-14T10:56:57.840 に答える
0

CSSではのネスト<ul>が許可されています

nav-mainあなたが垂直で水平にしようとしているnav_submenuなら、あなたdisplay: inline-blockはul.nav-main > li

<style>
    ul.nav_main li { display: inline-block }
    ul.nav_submenu li { display: block }
</style>

<ul class="nav_main">
    <li>Item 1
        <ul class="nav_submenu">
            <li>Option 1.1</li>
            <li>Option 1.2</li>
        </ul>
    </li>
    <li>Item 2
        <ul class="nav_submenu">
            <li>Option 2.1</li>
            <li>Option 2.2</li>
        </ul>
    </li>
</ul>

Linux上のFirefox11およびChrome17でテスト済み

于 2012-04-14T11:04:10.870 に答える