74

来自http://webdesign.about.com/od/htmltags/p/aadivtag.htm

在 HTML 4 中，DIV 元素不能位于另一个块级元素中，例如 P 元素。但是，在 HTML5 中，可以在其中找到 DIV 元素，并且可以包含其他流内容元素，例如 P 和 DIV。

我在表格中有这样的东西

<p> <label...> <input...> </p>

但是当 Rails 自动生成一个包装输入的 error_explanation div 时，一个段落变成了两个，我在 Firebug 中看到了这一点：

<p> <label...> </p> <div...> <input...> </div> <p> </p>

另外，如果我只是添加一个简单的

<p> <div> test </div> </p>

发生同样的问题（JSFiddle），它在 DOM 中呈现为

<p> </p> <div> test </div> <p> </p>

为什么？

更新：我给这篇文章的作者发了电子邮件，她做了适当的修改。

4

4 回答 4

131

从精细规范：

p——段落

[...]

允许的内容

措辞内容

这个短语内容是什么？造句内容：

由与普通字符数据混合的短语元素组成。

普通字符数据就是这样：未标记的文本。短语元素是：

a或em或strong ... [一堆其他元素都不是div ]

因此，<p><div></div></p>不是有效的 HTML。根据规范中列出的标签省略规则，<p>标签会自动被<div>标签关闭，从而使</p>标签没有匹配的<p>. <p>浏览器完全有权通过在 : 之后添加一个打开标记来尝试更正它<div>：

<p></p><div></div><p></p>

您无法将 a<div>放入 a<p>并从各种浏览器中获得一致的结果。为浏览器提供有效的 HTML，它们会表现得更好。

你可以放在<div>里面，<div>所以如果你替换你<p>的<div class="p">并适当地设置它，你可以得到你想要的。

您在 about.com 上的参考与 w3.org 上的规范不一致，您的参考在误导您。

于 2012-05-26T05:51:14.573 回答
21

虽然这是一个相当老的问题，但我想我会分享我对这个问题的解决方案，以帮助其他可能在谷歌上偶然发现这个页面的人。

如前所述，不允许将块元素放在 p-tag 中。然而，在实践中，这实际上并不完全正确。实际显示值实际上完全无关；唯一需要考虑的是标签的默认显示值，例如 div 的“block”和 span 的“inline”。更改显示值仍然会使浏览器过早关闭 p-tag。

然而，这也适用于相反的方式。您可以设置 span-tag 的样式，使其行为与 div-tag 完全相同，但它仍将在 p 环境中被接受。

所以不要这样做：

<p>
   <div>test</div>
</p>

你可以这样做：

<p>
   <span style="display:block">test</span>
</p>

请记住，浏览器会递归地验证 p 环境的内容，所以即使是这样的：

<p>
   <span style="display:block">
       <div>test</div>
   </span>
</p>

将导致以下结果：

<p>
   <span style="display:block"></span>
</p>
<div>test</div>
<p>
</p>

希望这会帮助那里的人:)

于 2013-10-18T10:15:40.833 回答
9

webdesign.about.com 页面完全是错误的；他们可能误解了 HTML5 草案。在 P 中允许 DIV 会造成很大的混乱；我认为在 HTML5 开发过程中从未考虑过它。

如果您尝试在 P 中使用 DIV，则 DIV 开始标记将隐式关闭 P 元素。这可能解释了你所看到的事情。

为避免此问题，如果内容包含或可能包含 DIV 元素，请不要使用 P。请改用 DIV。

于 2012-05-26T06:54:44.830 回答
1

<div>将元素放在<p>DOM 中的a 内是不可能的，因为开始<div>标签会自动关闭<p>元素。

<P>不允许其中的其他元素。only<span>和<strong>element allowed.In<p></p>我们只能添加与文本相关的标签。 请参阅此链接以了解更多信息

于 2017-05-29T08:38:29.980 回答