是什么原因导致这些块在顶部不对齐？

Question

我还在学习CSS。我有一排li块，他们没有在顶部对齐。我可以推断，不知何故，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;}

因此第一个div的more information文本与第二个div中的h3对齐。

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