【解决方法】element-ui 中输入框input与下拉选择框没有在一条水平线上

简介: 【解决方法】element-ui 中输入框input与下拉选择框没有在一条水平线上

一、问题复现


如图所示,左边的输入框和右边的下拉选择框不在同一水平线上。

1666271499228.jpg


二、观察现象


1666271510563.jpg

可以看到行元素内的子元素顶部都是对齐的,而且下拉选择框的顶部和行的顶部是有间隙的,因此问题就出现在对齐的属性上。


三、修改CSS属性


增加下拉选择框的垂直对齐属性,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

style="vertical-align: top;"

四、结果


1666271536286.jpg

相关文章
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
3456 1
|
JavaScript
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
848 1
Element UI 源码改造 —— 自定义数字输入框的实现
Element UI 源码改造 —— 自定义数字输入框的实现
511 1
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
797 0
|
JavaScript
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
2009 0
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
|
数据安全/隐私保护
Element UI 密码输入框--可切换显示隐藏,自定义图标
Element UI 密码输入框--可切换显示隐藏,自定义图标
701 0
Element UI 带快捷编辑的多行输入框(含光标位置的获取和指定)
Element UI 带快捷编辑的多行输入框(含光标位置的获取和指定)
212 0
Element UI 数字输入框的实现
Element UI 数字输入框的实现
578 0
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
806 0
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
1316 0