为什么内联块以这种方式工作？

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>