一、问题复现
如图所示，左边的输入框和右边的下拉选择框不在同一水平线上。
二、观察现象
可以看到行元素内的子元素顶部都是对齐的，而且下拉选择框的顶部和行的顶部是有间隙的，因此问题就出现在对齐的属性上。
三、修改CSS属性
增加下拉选择框的垂直对齐属性，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
style="vertical-align: top;"
四、结果
【解决方法】element-ui 中输入框input与下拉选择框没有在一条水平线上
2022-10-20
866
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
【解决方法】element-ui 中输入框input与下拉选择框没有在一条水平线上
相关文章
|
3月前
|
JavaScript
前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤，以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框，在输入时对列表选项进行过滤，并支持右键点击列表选项弹出菜单进行删除的功能。
60
0
0
|
4月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
656
1
1
|
4月前
|
JavaScript
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
223
1
1
|
4月前
|
4月前
|
数据安全/隐私保护
|
4月前
|
4月前
|
4月前
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ？
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ？
210
0
0
|
4月前
|
6月前
热门文章
最新文章
1
分析SpinnerActivityTest中有关控件操作以及UI线程问题
2
UI/UE对个性化推荐的影响
3
CDP中使用YARN Web UI和CLI
4
WPF的UI虚拟化
5
SharePoint自动化系列——通过Coded UI录制脚本自动化创建SharePoint Designer Reusable Workflow
6
再见 Swagger UI，国人开源了一款超好用的 API 文档生成框架，Star 4.7K+，真香……
7
Android UI学习 - Linear Layout, RelativeLayout
8
VUE element-ui 之table表格勾选复选框动态带出（将某列的值赋值给指定列）对应列的数据
9
Windows Phone 及 Metro UI 设计讨论
10
UGUI防止穿透和判断点击的是否是UI
1
如何使用公网地址远程访问内网Nacos UI界面查看注册服务
342
2
Android UI底层绘制原理
47
3
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
164
4
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
187
5
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
145
6
学会Web UI框架--Bootstrap，快速搭建出漂亮的前端界面
139
7
前端CSS样式零基础教学总结，UI、前端开发都适用
77
8
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
49
9
ui设计_入门ai、ps
63
10
【AI大模型应用开发】3.2 RAG实战 - RAG应用+UI实现加载本地文件并对话
198