放置顯示：嵌套顯示中的內聯元素：塊元素不起作用？

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/