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

我是相當新的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}

來源

2015-07-20 Rudean

「前一段文字」您的包裹中段落標記。那麼你的第四個例子將工作 – Keeno

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

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

來源

2015-07-20 08:38:03 thebenedict

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

回答

相關問題