html - 放显示:inline element inside nested display:block element doesn't work?

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 :

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

检查源代码，你就会明白为什么它的行为与你期望的不同

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

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

Demo