Question

我试过内联div，但它不起作用。

很难解释，请看下面的链接：

<p style="background:red;">SDFDSDSFDSSFDAFASasf<br /> <span style="background: blue;   display:inline;">sadfasfasdf</span><em>sasfsalfjsalfjalsjf</em></p>
<p style="background:red;">SDFDSDSFDSSFDAFASasf<br /> <div style="background: blue; display:inline;">sadfasfasdf</div><em>sasfsalfjsalfjalsjf</em></p>

问题是为什么p块不包含第二个例子中第一行之后的元素，其中我使用div而不是span？

我猜测问题在于div的默认属性

Answer 1

你不应该在这样的元素中使用div，这就是为什么我们有span s。

<div>关闭<p>标记，因为如果后跟另一个块元素，则不需要结尾</p>。所以<p>已关闭，我们都知道<p>会自动添加以下换行符。

如果p元素紧跟着地址，文章，旁边，blockquote，dir，div，dl，fieldset，footer，form，h1，h2，h3，h4，h5，则可以省略p元素的结束标记， h6，header，hr，menu，nav，ol，p，pre，section，table或ul元素，或者如果父元素中没有更多内容且父元素不是元素。

{来自其他答案的被盗链接} w3 on Paragraph tags

请在<p> vs <div>

上查看

也许这也是

difference between div and span tag

Answer 2

将div置于p内，语法错误。

有关块元素的更多信息，div span和p元素，请参阅 https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements

Answer 3

您无法在<p>内嵌套块级元素 - 仅允许phrasing content（包括<span>以及内联格式化上下文中的所有其他元素）

如果你检查你的例子，你会发现<div>会自动从段落外移除（<p>就像一个自动关闭元素），最后你会得到两个线框（内联<div>和<em>）以及下一行的空区块<p>。

Answer 4

看起来必须这样做，<div>不能在<p>内，但<span>可以。因此，由于<div>的{{1}}，margin get被推下来了。

<p>保留在<span>内，因此不会被<p>的{{1}}推下来。

使用firebug时，您可以清楚地看到此行为。

Answer 5

查看检查员（Firebug或其他）。

这是因为浏览器在<p>之前解析HTML <div>元素时关闭，因为HTML的语义表明<div>

中不应该有任何<p

Answer 6

简而言之，不可能在p中放置div元素。打开div标签会自动关闭p元素。

更长的版本：

形成w3c建议，请参阅9.3.1 Paragraphs: the P element，您可以阅读：

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

我认为你已经猜到了，但div标签是一个块元素，即使你指定css显示是内联的。因此描述的行为

Answer 7

在<p>中设置块级元素是无效的，因此浏览器可以完全合法地关闭<p>并在解释标记后在</div>之后打开一个新元素。

w3链接

The p element

为什么内联div的行为与内联跨度不同

7 个答案: