与段落的奇怪的html错误

Question

所以我有这段代码：

<p id="item_1">
    <div class="background displayInline deleteItemFromCart" title="Delete item"></div>
    some text
</p>

简单吧？现在如果我在Chrome dev工具中查看源代码会发生什么：

正如您所看到的那样<p>不再包含任何内容。

如果我尝试删除div文本会再次返回<p>标记，那么我最好的猜测是<p>不能包含任何或只是div元素？

编辑嗯这是一个愚蠢的问题，反正现在我想起来我可以用<ul>而不是<p>如果我打算建立一个列表事情......无论如何，谢谢大家的帮助。

Answer 1

这并不奇怪。这只是错误的标记：）

<p id="item_1">
    <span style="display:block" class="background displayInline deleteItemFromCart" title="Delete item"></span>
    some text
</p>

但是虽然内联样式很糟糕，但你应该把这样的东西放到你的master.css文件中。

p span {display:block}
// Or
#item_1 span {display:block}

Answer 2

p代码无法包含块级元素，包括其自身。资料来源：http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

Answer 3

您说得对，<p>只能包含内联元素和文字，但<div>是一个块元素。

内联元素为：a abbr acronym applet b basefont bdo big {{ 1}} br button cite code del dfn em font i {{ 1}} img ins input iframe kbd label map object q {{ 1}} samp script select small span strong sub sup

Answer 4

P只能包含内联元素。

有关内联元素/流内容的快速讨论，请参阅此链接。

Should ol/ul be inside <p> or outside?