当一个高于其他块时，内联块对块应用顶级效果

Question

我想构建一个响应式导航栏，其中包含div width和height的3 inline-block。

我对每个块应用top: ?%，我得到了一个我不理解的行为。

问题是，第三个块由2行而不是第一行组成，第二个块由1行组成。

第二行对第三个块的影响就像{{1}}会自动应用于第一个和第二个块，我真的不明白为什么。

这是一个JsFiddle，您如何“对齐”3个街区？

Answer 1

当然，添加vertical-align:top。）