Html 把 <div> 放在 <p> 里面是添加一个额外的 <p>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10763780/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Putting <div> inside <p> is adding an extra <p>
提问by Steve
From http://webdesign.about.com/od/htmltags/p/aadivtag.htm
来自http://webdesign.about.com/od/htmltags/p/aadivtag.htm
In HTML 4, the DIV element cannot be inside another block-level element, like a P element. However, in HTML5 the DIV element can be found inside and can contain other flow content elements, like P and DIV.
在 HTML 4 中，DIV 元素不能位于另一个块级元素内，如 P 元素。但是，在 HTML5 中，可以在内部找到 DIV 元素，并且可以包含其他流内容元素，例如 P 和 DIV。
I have something like this inside a form
我在表单中有这样的东西
<p> <label...> <input...> </p>
but when Rails auto-generates an error_explanation div wrapping the input, the one paragraph turns into two, and I see this in Firebug:
但是当 Rails 自动生成一个 error_explanation div 包装输入时，一个段落变成了两个，我在 Firebug 中看到了这一点：
<p> <label...> </p> <div...> <input...> </div> <p> </p>
Also, if I just add a simple
另外，如果我只是添加一个简单的
<p> <div> test </div> </p>
the same issue occurs (JSFiddle) and it gets rendered in the DOM as
发生了同样的问题（JSFiddle），它在 DOM 中呈现为
<p> </p> <div> test </div> <p> </p>
Why?
为什么？
Update:I e-mailed the author of the article and she made the appropriate changes.
更新：我给这篇文章的作者发了电子邮件，她做了适当的修改。
回答by mu is too short
From the fine specification:
从精细规格：
p – paragraph
[...]
Permitted contents
Phrasing content
p——段落
[...]
允许内容
措辞内容
And what is this Phrasing content? Phrasing content:
这是什么短语内容？词组内容：
Consists of phrasing elementsintermixed with normal character data.
由与普通字符数据混合的短语元素组成。
Normal character datais just that: unmarked up text. Phrasing elementsare:
普通字符数据就是：未标记的文本。短语元素是：
aor emor strong... [a bunch of other elements none of which are div]
a或em或strong... [一堆其他元素都不是div]
So, <p><div></div></p>is not valid HTML. Per the tag omission rules listed in the spec, the <p>tag is automatically closed by the <div>tag, which leaves the </p>tag without a matching <p>. The browser is well within its rights to attempt to correct it by adding an open <p>tag after the <div>:
因此，<p><div></div></p>不是有效的 HTML。根据规范中列出的标签省略规则，<p>标签会自动关闭<div>标签，从而使</p>标签没有匹配的<p>. 浏览器完全有权尝试通过<p>在 之后添加一个打开标记来纠正它<div>：
<p></p><div></div><p></p>
You can't put a <div>inside a <p>and get consistent results from various browsers. Provide the browsers with valid HTML and they will behave better.
您无法将 a<div>放入 a<p>并从各种浏览器获得一致的结果。为浏览器提供有效的 HTML，它们会表现得更好。
You can put <div>inside a <div>though so if you replace your <p>with <div class="p">and style it appropriately, you can get what you want.
你可以放在<div>里面，<div>所以如果你替换你<p>的<div class="p">并适当地设计它，你可以获得你想要的。
Your reference at about.com disagrees with the specification at w3.org, your reference is misleading you.
您在 about.com 上的引用与 w3.org 上的规范不一致，您的引用误导了您。
回答by Daniel Perván
While this is a rather old question, I thought I'd share my solution to the problem to help other people who may stumble upon this page on google.
虽然这是一个相当古老的问题，但我想我会分享我对这个问题的解决方案，以帮助可能在 google 上偶然发现此页面的其他人。
As has been said, it is not permitted to put block elements inside a p-tag. However, in practice, this is not actually entirely true. The actual display value is in fact entirely irrelevant; the only thing that is considered is what the defaultdisplay value is for the tag, e.g. "block" for divs and "inline" for spans. Changing the display value will still make the browser prematurely close the p-tag.
如前所述，不允许将块元素放在 p-tag 中。然而，在实践中，这实际上并不完全正确。实际显示值实际上完全无关；唯一需要考虑的是标签的默认显示值，例如“块”代表 div，“内联”代表跨度。更改显示值仍然会使浏览器过早关闭 p-tag。
However, this also works the other way around. You can style a span-tag to behave exactly like a div-tag, but it will still be accepted inside the p environment.
但是，这也适用于相反的情况。您可以将 span-tag 的样式设置为与 div-tag 完全一样，但它仍会在 p 环境中被接受。
So instead of doing this:
所以不要这样做：
<p>
<div>test</div>
</p>
You can do this:
你可以这样做：
<p>
<span style="display:block">test</span>
</p>
Just remember that the browser validates the content of the p environment recursively, so even something like this:
请记住，浏览器以递归方式验证 p 环境的内容，所以即使是这样的：
<p>
<span style="display:block">
<div>test</div>
</span>
</p>
Will result in the following:
将导致以下结果：
<p>
<span style="display:block"></span>
</p>
<div>test</div>
<p>
</p>
Hopefully this will help someone out there :)
希望这会帮助那里的人:)
回答by Jukka K. Korpela
The webdesign.about.com page is simply wrong; they probably misunderstood the HTML5 drafts. Allowing DIV inside P would cause great confusion; I don't think it has even ever been considered during HTML5 development.
webdesign.about.com 页面完全错误；他们可能误解了 HTML5 草稿。在 P 中允许 DIV 会引起很大的混乱；我认为在 HTML5 开发过程中甚至从未考虑过它。
If you try to use DIV inside P, the DIV start tag will implicitly close the P element. This probably explains the things you've seen.
如果您尝试在 P 中使用 DIV，DIV 开始标记将隐式关闭 P 元素。这可能解释了你所看到的事情。
To avoid the problem, do not use P if the content contains, or may contain, a DIV element. Use DIV instead.
为避免此问题，如果内容包含或可能包含 DIV 元素，请不要使用 P。请改用 DIV。
回答by Suresh Patil
It is impossible to place a <div>element inside a <p>in the DOM because the opening <div>tag will automatically close the <p>element.
在 DOM 中，不可能将<div>元素放在 a<p>内，因为开始<div>标签会自动关闭该<p>元素。
<P>won't allow other element inside it. only <span>and <strong>element allowed.In <p></p>we can add only text related tags.
refer this link to know more
<P>不允许内部有其他元素。only<span>和<strong>element allowed.In<p></p>我们只能添加与文本相关的标签。
请参阅此链接以了解更多信息
