是什麼導致這些塊不在頂部對齊？

Question

我仍然在學習圍繞CSS的方式。我有一排鋰塊，它們不在頂部排列。我可以推斷出P塊以某種方式推動了李，但我不知道爲什麼。誰能解釋一下？

http://codepen.io/mesu/pen/bVoOrg

li { 
    display:inline-block; 
    height: 200px; 
    width: 450px; 
    border: 2px solid black; 
    text-align: center; 
} 

Answer 1

inline-block元素默認對齊baseline（我相信）。

li {vertical-align: top;} 

所以more information文本的第一個div的與h3在第二個div對齊：你可以改變這一點。

Answer 2

嘗試這種情況：

li { 
    display:block; 
    float:left; 
    height: 200px; 
    width: 450px; 
    border: 2px solid black; 
    text-align: center; 
} 

Answer 3

嘗試增加display: table; width: 100%;到p個元素。

例子：http://codepen.io/anon/pen/BomLMp