一、问题复现
如图所示，左边的输入框和右边的下拉选择框不在同一水平线上。
二、观察现象
可以看到行元素内的子元素顶部都是对齐的，而且下拉选择框的顶部和行的顶部是有间隙的，因此问题就出现在对齐的属性上。
三、修改CSS属性
增加下拉选择框的垂直对齐属性，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
style="vertical-align: top;"
四、结果
【解决方法】element-ui 中输入框input与下拉选择框没有在一条水平线上
2022-10-20
665
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
【解决方法】element-ui 中输入框input与下拉选择框没有在一条水平线上
相关文章
|
13天前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
16
1
1
|
13天前
|
JavaScript
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
24
1
1
|
13天前
|
11天前
|
数据安全/隐私保护
|
11天前
|
13天前
|
13天前
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ？
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ？
11
0
0
|
14天前
|
2月前
|
2月前
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
228
0
0
热门文章
最新文章
1
Atlas中有趣且无用的功能：Sys.UI.Window类
2
【iOS UI】iOS 9 GUI 资源分享
3
[cb]NGUI事件及复杂UI管理
4
Android UI开发第十九篇——介绍一个开源的gifview——Android显示GIF动画
5
SAP CRM WebClient UI的on_new_focus应该怎么理解
6
Vue element ui 中 select 下拉框不回显
7
UI 原型设计 Axure 7 中使用变量和分支实现按来源页面返回
8
Android优化——UI优化（二） 使用include标签复用布局
9
Android UI开发第十七篇——Android Fragment实例
10
Protocol 模拟UI中一个按钮点击改变lable中的值
1
Qt第一课 第一个ui界面
32
2
由于JavaScript是单线程的，因此在处理大量异步操作时，需要确保不会阻塞UI线程
39
3
如何启动flowable的Flowable UI画工作流程图
44
4
Element-ui快速入门
25
5
VUE里修改element-ui的显示层次与上下间隔
52
6
UI开发第四篇——实现像handcent sms或者chomp sms那样的气泡
21
7
Element-ui快速入门
31
8
如何使用公网地址远程访问内网Nacos UI界面查看注册服务
121
9
Android UI底层绘制原理
23
10
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
46