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>

Demo

Answer 2

有两种方法可以做到这一点：

1. 将p元素转换为div。

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

1. 或者将p的css更改为内联块：

   p {     display：inline-block; }

查看演示：https://jsfiddle.net/sonam185/sahfvhdd/
带有div元素的演示：http://jsfiddle.net/sonam185/3c3cyv4z/