爲什麼內聯塊以這種方式工作？

Question

我是相當新的HTML和CSS。我需要兩個h3元素以一行顯示。我正在嘗試使用display:inline-block，但它對我來說意想不到。這裏是小提琴示例http://jsfiddle.net/4NrXF/31/。 這裏我提供了4種使用內聯塊屬性的不同選項。 我需要在第一行顯示文本「之前的某些文本」，並在第二行顯示文本「顯示文本」。正如你所看到的 - 第一個選項只產生一行，這對我來說不合適。我認爲4選項會正常工作，但正如你可以看到，由於某種原因，不會生成「顯示文本」行。爲什麼內聯塊像這樣工作？
這裏是HTML和CSS我使用：

Some text before 
<h3 class="a"> DISPLAY </h3> 
<h3 class="a"> TEXT </h3> 

<h3 > DISPLAY </h3> 
<h3 > TEXT </h3> 

<h3 class="a"> DISPLAY </h3> 
<h3 > TEXT </h3> 

text before 
<h3 > DISPLAY </h3> 
<h3 class="a"> TEXT </h3> 

.a {display: inline-block} 

Answer 1

的 「文本之前」 是一個內嵌元素。如果你想它自己的行，你可以用你的選項4「文本之前」包裹在一個塊元素，像p

<p>Some text before</p> 
<h3 class="a"> DISPLAY </h3> 
<h3 class="a"> TEXT </h3>