放置显示：嵌套显示中的内联元素：块元素不起作用？

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元素为你。

那么我们如何解决它？用它代替<p>

Demo

Answer 2

的<span>元素有两种方法可以做到这一点：

1. 转换p元素来核实。

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

或更改p的CSS内联块为：

p { 显示：内联块; }

视图演示：https://jsfiddle.net/sonam185/sahfvhdd/
演示用div元素：http://jsfiddle.net/sonam185/3c3cyv4z/