将 <div> 放入 <p> 是添加一个额外的 <p> [重复]答案

【问题标题】：Putting <div> inside <p> is adding an extra <p> [duplicate]将 <div> 放入 <p> 是添加一个额外的 <p> [重复]
【发布时间】：2012-06-01 14:08:06
【问题描述】：

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

为什么？

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

【问题讨论】：

标签： html

【解决方案1】：

来自fine specification：

p – 段落

[...]

允许的内容

短语内容

这个短语内容是什么？ Phrasing content:

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

普通字符数据就是这样：未标记的文本。 Phrasing elements 是：

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

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

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

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

您可以将<div> 放在<div> 中，但是如果您将<p> 替换为<div class="p"> 并适当地设置它的样式，您就可以获得您想要的。

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

【讨论】：

br 标签怎么样？使用 DIV 是否被认为是更好的做法？
@Steve：视情况而定。当我需要在组中换行时，我会使用容器来分组元素和 <br>。
请注意，HTML5 还要求 </p> 结束标记的行为导致一个空段落（尽管它可能只是由于现有的浏览器互操作而导致）。见stackoverflow.com/questions/11570902/…
@BoltClock：Mark Amery 添加了“根据规范中列出的标签省略规则，<p> 标签会自动被<div> 标签关闭，这使得</p> 标签没有匹配<p>" 注意，我们需要更多说明吗？也许整个段落可以重写。
我认为它看起来不错。我的评论旨在澄清浏览器不仅有权纠正不匹配的结束标签，而且必须这样做。也许它可以并入段落中，但我认为不需要重写。

【解决方案2】：

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

如前所述，不允许将块元素放在 p-tag 中。然而，在实践中，这实际上并不完全正确。实际显示值实际上完全无关；唯一需要考虑的是标签的 default 显示值，例如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>

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

【讨论】：

您说<p><span>...</span></p> 在技术上仍然是无效的 HTML，但事实并非如此。 <span> 是一个在 <p> 内部的短语元素，更改其显示值不会使 HTML 无效。 Here's another article which discusses this
将span 设置为display:block 并将其放在p 中很可能是使用HTML/CSS 的一种单一方式（尽管Jukka 在stackoverflow.com/a/18933182/1709587 提出了一个有趣的案例来说明它的原因有时可能是合理的）。然而，它是完全有效的 HTML。当 HTML 规范谈到元素的允许内容时，它只关心标签类型，而不是它们的样式。

【解决方案3】：

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

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

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

【讨论】：

br 标签怎么样？使用 DIV 是否被认为是更好的做法？
@Steve，是的，br 标签呢？如果您的意思是它们是否可能出现在 p 元素中，那么是的，它们可以。 br 的实际问题是它不会将一行转换为元素，这使得样式和脚本可能存在问题。

【解决方案4】：

不可能将<div> 元素放在DOM 中的<p> 中，因为打开的<div> 标记会自动关闭<p> 元素。

<P> 不允许在其中包含其他元素。只允许<span> 和<strong> 元素。在<p></p> 中，我们只能添加与文本相关的标签。 refer this link to know more

【讨论】：