为什么内联div在p内部以这种方式运行 [英] Why are inline div behaving this way inside p

问题描述

在链接的例子中，我有一个文本和一个段落，每段都包含 span 和 div 元素。
尽管所有 div 元素都应用了 display：inline; 样式，但第一个 div 从< p> 从下一行开始。

为什么会这样？

这里是例子：
http://jsfiddle.net/7HAPp/1/

我在这里复制了代码：

  Cum sociis natoque penatibus et< span>我是跨度< / span>产妇montes，nascetur 
 ridiculus mus。 Nulla consequat massa< div>我是内嵌div< / div>在enim justo中​​，
 rhoncus ut，< div>我是内嵌div< / div>未分类的，venenatis个人简历，justo。 Nullam 
 dictum felis eu pede mollis pretium。 
 
 
< p> Cum sociis natoque penatibus et< span>我是跨度< / span>产妇montes，nascetur 
 ridiculus mus。 Nulla consequat massa< div>我是内嵌div< / div>在enim justo中​​，
 rhoncus ut，< div>我是内嵌div< / div>未分类的，venenatis个人简历，justo。 Nullam 
 dictum felis eu pede mollis pretium。< / p> 
  

解决方案

div 在 p 内是无效的标记。当浏览器遇到 div 元素时，它会自动关闭 p 标签并启动新的 div 。

In the linked example, I have a text and a paragraph which each contain span and div elements. Although all the div elements have the display: inline; style applied, the first div from the <p> starts on the next line.

Why is that ?

here is the example: http://jsfiddle.net/7HAPp/1/

I copied the code here:

Cum sociis natoque penatibus et <span>i'm a span</span> parturient montes, nascetur
ridiculus mus. Nulla consequat massa <div>i'm an inline div</div> In enim justo, 
rhoncus ut, <div>i'm an inline div</div> imperdiet a, venenatis vitae, justo. Nullam
dictum felis eu pede mollis pretium.


<p>Cum sociis natoque penatibus et <span>i'm a span</span> parturient montes, nascetur
ridiculus mus. Nulla consequat massa <div>i'm an inline div</div> In enim justo,
rhoncus ut, <div>i'm an inline div</div> imperdiet a, venenatis vitae, justo. Nullam 
dictum felis eu pede mollis pretium.</p>

解决方案

div inside p is invalid markup. When the browser encounters the div element it auto-closes the p tag and starts the new div.

这篇关于为什么内联div在p内部以这种方式运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！