Question

我正在创建一个简单的地址容器，而我在HTML中的内容只是以下简单的标记：

<p class="address">
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
</p>

和以下CSS：

.address {
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.5);
    box-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

现在某种方式<p>元素不包含ul，而且{@ 1}}标记也没有应用框阴影，但是当我用p标记替换p标记时一个div标签，一切正常。 div包含ul（可以在inspect元素中看到），div也有一个box-shadow。我已经在FF和Chrome中检查了这个，并且不知道为什么会发生这种故障。

Answer 1

请参阅类似问题的答案：List of HTML5 elements that can be nested inside P element?

只有短语内容可以在<p>标记之间，并且描述如下：

短语内容是文档的文本以及元素在段落内标记该文本。短语的运行内容形式段落。

Answer 2

ul元素内不允许合法地使用

p个元素。

参考： http://www.w3.org/TR/html5/grouping-content.html#the-p-element

Answer 3

＆＃13;

$("p").append("<ul>        <li>hello</li>        <li>hello</li>        <li>hello</li>    </ul>");

＆＃13;

.address {
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.5);
    box-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

＆＃13;

<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="address">
</p>
</body>
</html>

＆＃13;

**它的奇怪表现是你可以通过java脚本做这件事作为使用jQuery或java脚本将标签附加到

标签这将有效**

它可能会出现渲染时间，它也与IE浏览器一样奇怪。尝试IE浏览器这个东西也是。

Answer 4

即使您在ul内P保留了{4}}，但您在浏览器中仍无法呈现。请参阅以下屏幕截图，以获取参考 enter image description here

p标签不包含ul标签

4 个答案: