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

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;
}

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

Answer 1

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

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;
}