如何将选择元素与输入文本垂直对齐？

Question

https://jsfiddle.net/Lztqo0va/

HTML

<select>
<option>lorem ipsum</option>
</select>
<input type="text" value="lorem ipsum"/>

CSS

select, input{
  height: 20px;
  padding: 5px;
  box-sizing: border-box;
  border: none;
  margin: 0;
  width: 100px;
}

我希望select元素与输入元素垂直对齐。这可能不改变它们的显示属性吗？即使我确实更改了属性，选择内的文本仍然是偏离中心的。

Answer 1

要垂直对齐两个标记，可以使用vertical-align: middle css属性。请注意，您应该减少select标记的font-size以使文本适合。

https://jsfiddle.net/Lztqo0va/1/

Answer 2

您需要删除填充并仅添加左边填充或增加框本身的高度。

https://jsfiddle.net/Lztqo0va/3/

select, input{
  height: 25px;
  padding-left: 5px;
  box-sizing: border-box;
  border: none;
  margin: 0;
  width: 100px;
  line-height: 20px;
}