如何将DIV放入P中？

Question

我如何在段落中嵌入div？我将display更改为inline，但浏览器将基础段落分成两个元素，并且div不会成为段落的一部分。

- János

---

请提供一个 http://jsfiddle.net 的示例。 - Gergely Fehérvári

参见：将<div>放在<p>内会添加额外的<p> - KyleMit

Answer 1

来自W3网站的内容：

P元素代表一个段落。它不能包含块级元素（包括 P 元素本身）。

- Gergely Fehérvári

Answer 2

如果你想让代码验证通过，则不能将除内联元素以外的任何内容嵌套在<p>中。

从属性定义中可以看到：

<!ELEMENT P - O (%inline;)* -- 段落 -->

理解这些标准有时可能比较困难，但方括号中的部分意味着<p>只能包含inline元素。

你可以（也应该）在<p>中使用<span>，如果需要，你还可以更改它的CSS显示属性为block或inline-block，这样做是完全有效的，因为CSS属性不会改变元素的实际定义...在你的情况下，似乎需要一个内联元素，那就直接用<span>吧。

- clairesuzy

---

重点不在于你的代码是否有效，更重要的是它在浏览器中根本无法正常工作——因为浏览器会自动在 div 之前添加 </p> 标签。 - duri

是的，但最好知道为什么，因为它可以工作，通常总有一种方法可以使CSS显示您想要的内容，例如p，div {display：inline-block;}和p，div {display：inline！ie7;}，因此最好解释为什么不这样做。 - clairesuzy

不行，它做不到。这是HTML解析器自动包含段落，它不知道应用于元素的样式。看看http://jsfiddle.net/rMHbg/ - <p>总是在<div>之前关闭。 - duri

好的，谢谢Duri。但是我知道自动关闭（带有可选关闭标签的元素），我上面的评论中的CSS使div in p 显示为用户所需，但我永远不会建议使用它（除非没有更改HTML的选项）。澄清一下，“验证”很重要，HTML验证通常是第一步，解释为什么CSS不会像您认为的那样显示，而无需知道解析器的工作原理。 - clairesuzy

Answer 3

创建一个，将其样式设置为块级元素。

<p>
  paragraph text
  <span style="display: block;">Span stuff</span>
</p>

- Julian

Answer 4

对于那些认为验证是决定性的人，实际上有两种方法可以在p标签内嵌套一个div。

其中一种方法是使用脚本中的DOM操作。例如：

var theDiv = document.createElement("div");
theDiv.appendChild(document.createTextNode("inserted"));
var theP = document.getElementsByTagName("p")[0];
theP.insertBefore(theDiv, theP.firstChild); 

在这里可以看到它的运作方式：http://www.alohci.net/text/html/div-in-p-by-script.htm.ashx 另一种方法是使用XHTML并使用XML内容类型进行提供。（IE9之前的IE不支持）

在这里查看：http://www.alohci.net/application/xhtml+xml/div-in-p-by-mime.htm.ashx （请注意，虽然可以使用这种方式，但仍然无效。）

但是您提出了至关重要的观点。从语义上讲，这是无意义的。如果您在纸上写字，您不会将一个块放在段落中间，因此在HTML中也不需要这样做。

- Alohci

Answer 5

根据HTML标准，您不能将<div>元素嵌套在<p>元素内。请考虑为什么要这样做；这应该是完全不必要的。一个<p>元素只能包含内联元素和文本，这是符合逻辑的。

- You

Answer 6

是块级元素。Span是内联元素。它们都是容器。 您必须使用CSS为div设置display:inline。 当然，它不会通过验证，所以最好使用span（内联）来实现相同的效果。

- johnlemon

---

P是一个块级元素，只能容纳内联元素。 - wildcard

@omnosis - 你确定他把它放在了 div 上而不是 p 上吗？ - johnlemon