p 标签不包含 ul 标签答案

【问题标题】：p tag not containing ul tagp 标签不包含 ul 标签
【发布时间】：2015-05-14 15:02:42
【问题描述】：

我只是在创建一个简单的地址容器，而我的 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);
}

现在  元素不知何故不包含 ul 并且 box-shadow 也没有应用于 p 标签，但是当我用 div 标签替换 p 标签时，一切正常寻找。 div 包含ul（可以在检查元素中看到），并且 div 有一个 box-shadow。我已经在 FF 和 Chrome 中检查过这个问题，但不知道为什么会出现这个故障。

【问题讨论】：

供您参考http://stackoverflow.com/questions/5681481/should-ol-ul-be-inside-p-or-outside。考虑使用div istead。
@AlexanderSolonik 不，为什么？
@AlexanderSolonik 我不明白你的意思。假设地址只是一个文本，它不必必须包含在 中。
无论如何，为了回答技术问题， 结束标记是可选，所以当解析器看到<ul> 它知道 应该结尾。确实如此！所以 完全是空的，这就是它没有被绘制的原因。没有边距，没有阴影。
@AlexanderSolonik 这些页面描述了<address> 元素，在这种情况下不适用。你没有使用<address> 元素。

标签： html css

【解决方案1】：

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

 标签之间只能有分句内容，说明如下：

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

【讨论】：

+1 是唯一一个说“可以”而不是“应该”的答案。 “应该”并不意味着 p 包含 ul 或任何其他流内容实际上是不可能的； “可以”。
@BoltClock - 当然，这只是 HTML 解析器的限制。它不适用于 XML 解析器或 DOM 方法。
@Alohci：最新答案证明了这一点。好吧，我会的——我的印象是这种限制也适用于 DOM 方法。

【解决方案2】：

ul 元素在法律上不允许在 p 元素中使用。

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

【讨论】：

“合法”不是大多数人在讨论 HTML 标准时使用的术语吗？
@codyogden - 是的，尽管 HTML 4.01 规范使用“合法”的某些变体 40 次来描述有效性要求。例如，boolean attributes

【解决方案3】：

$("p").append("&lt;ul&gt;        &lt;li&gt;hello&lt;/li&gt;        &lt;li&gt;hello&lt;/li&gt;        &lt;li&gt;hello&lt;/li&gt;    &lt;/ul&gt;");

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

<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>

**奇怪的是你可以通过java脚本来做这件事作为附加标签到

使用 jQuery 或 java 脚本的

标记这将起作用 **

它可能与渲染时间有关，它在 IE 浏览器上的行为也很奇怪。也试试这个东西 ing IE 浏览器。

【讨论】：

【解决方案4】：

即使您将ul 保留在P 中，它也不会像您在浏览器中想象的那样呈现。请参考以下截图

【讨论】：

根据链接w3.org/TR/html5/grouping-content.html#the-p-element，我们不应该将 ul 嵌套在 p 中