将一行中的 div 与属性对齐"display: inline-block"无法正确对齐

Question

我正在尝试与display: inline-block连续对齐Divs。它可以正常工作，直到我将<input />放在Div内。请看看Codepen

这是HTML的代码：

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

和CSS：

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

我已经知道以正确方式对齐的解决方案。我想了解为什么在上述情况下会发生这种情况。

Answer 1

默认情况下vertical-align是baseline。

像这样更改它：

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

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

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

Answer 2

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

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

vertcal-align:middle;

添加它以对齐您的Divs垂直