Html 将行中的div与“display:inline block”属性对齐不正确

我试图将一行中的div与display:inline块对齐。在我把a放进div之前，它可以正常工作。请看一下

以下是html的代码：

<div class="x"></div>

<div class="x">
  <input type="text">
</div>

<div class="x"></div>

我已经知道正确调整它们的解决方案。我想了解为什么在上述情况下会发生这种情况。

.x{ 显示：内联块； 高度：250px； 宽度：20%； 背景：eee； 右边距：10px； 垂直对齐：中间对齐 } 默认情况下，垂直对齐是基线

更改如下：

.x{ 显示：内联块； 高度：250px； 宽度：250px； 背景：eee； 右边距：10px； 垂直对齐：顶部； }

---

发生这种情况是因为您将垂直对齐保留在其默认值基线处。。。为div元素指定top。谢谢@CBroe，明白了。

.x{
  display: inline-block;
  height: 250px;
  width: 250px;
  background: #eee;
  margin-right: 10px;
}

.x {
    vertical-align: top;
    //other css...
}