put display:嵌套显示内嵌元素:块元素不起作用？

Question

看这个例子:

http://jsfiddle.net/aLrfmyqm/

p {
    display: inline;
}
    
em {
    display:block;
}

<p> Outer inline <em>Block <p>Inner inline</p></em></p>   

我希望<p>Inner inline</p>它内联Block,然而,它从一个新的行开始.有没有人有这个想法？谢谢!

Answer 1

您的标记无效.你不应该p在p元素中嵌入元素,因此问题.

来自W3C:

P元素代表一个段落.它不能包含块级元素(包括P本身).

检查来源,你会得到它为什么它的行为与你期望的不同

您的浏览器实际上会将所有标签分开并p为您关闭元素.

那么我们如何修复呢？使用<span>元素而不是<p>

演示