如何将select元素与输入文本垂直对齐？
如何将select元素与输入文本垂直对齐？
提问于 2017-09-28 12:48:43
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元素与输入元素垂直对齐。如果不更改它们的显示属性，这是可能的吗？即使我确实更改了属性，select中的文本仍然垂直偏离中心。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-09-28 13:01:54
您需要移除填充，只添加左边的填充，或者增加框本身的高度。
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;
}Stack Overflow用户
发布于 2017-09-28 12:54:22
要垂直对齐这两个标记，可以使用vertical-align: middle css属性。请注意，您应该减少select标记的font-size，以使文本适合其中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46469590
复制相关文章
相似问题
腾讯云开发者
