1

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

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

http://jsfiddle.net/CsS5v/1/

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

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

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

4

7 回答 7

3

你不应该使用这样div的元素的内部，这就是我们有spans 的原因。

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

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

{Stolen link from another answer} 段落标签上的 w3

请在<p>vs上查看<div>

也许这也是

div和span标签的区别

于 2013-09-16T20:00:32.547 回答
2

在 a 中包含块级元素是无效的，因此浏览器在解释标记时<p>可能会非常合法地关闭<p>并在之后打开一个新元素。</div>

w3链接

p 元素

于 2013-09-16T20:03:33.590 回答
2

将 a 放在 a内部是不正确的语法。divp

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

于 2013-09-16T19:57:41.067 回答
2

您不能在 a 内嵌套块级元素<p>- 只允许使用短语内容（包括 a<span>和内联格式上下文中的所有其他元素）

如果您检查您的示例，您会看到<div>自动从段落外部删除（<p>类似于自闭合元素的行为），您最终会得到两个行框（内联<div>和）以及下<em>一个空块级别<p>线。

于 2013-09-16T19:57:57.690 回答
2

看起来这必须做到 a<div>不能在 a 内<p>，但 a<span>可以。因此，<div>由于.margin<p>

<span>留在里面，所以<p>它不会被 的 推margin下<p>。

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

于 2013-09-16T19:58:06.393 回答
2

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

更长的版本：

形成 w3c 建议见9.3.1 段落：您可以阅读的 P 元素：

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

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

于 2013-09-16T20:00:24.633 回答
2

Look into an inspector (Firebug or something).

This is because browser closes while parsing HTML <p> element before <div> because semantics of HTML says that there should not be any <div> in <p

于 2013-09-16T19:58:34.733 回答