为什么输入的字体大小会破坏内联块对齐？

Question

我最近偶然发现了我必须与彼此相邻的输入对齐的问题，这些输入的font-size参数略有不同。事实证明，这会破坏输入元素的对齐。

这是一个夸大的例子来说明问题：

div input {
  display: inline-block;
  width: 100px;
  height: 34px;
}
.field1 {
  font-size: 50px;
}

<div>
  <input class="field1" type="text" value="test">
  <input class="field2" type="text" value="test">
</div>

解决这个问题的最佳方法是什么？如何将两个输入元素排成一行？

Answer 1

vertical-align: top;似乎有助于解决这个问题。我只添加了一个规则，它将输入元素与其父容器的顶部对齐（在这种情况下为div）。

＆＃13;

＆＃13;

div input {
  display: inline-block;
  width: 100px;
  height: 34px;
  vertical-align: top; /* added */
}
.field1 {
  font-size: 50px;
}

＆＃13;

<div>
  <input class="field1" type="text" value="test">
  <input class="field2" type="text" value="test">
</div>

＆＃13;

＆＃13;

＆＃13;