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

我认为 XHTML 1.0 没有问题。如果要检查，可以使用 W3C Validator：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 Validator 没有错误

于 2012-04-14T10:56:57.840 回答
0

<ul>在 CSS 中允许嵌套

如果你想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 上的 Firefox 11 和 Chrome 17 中测试

于 2012-04-14T11:04:10.870 回答