一、问题复现
如图所示，左边的输入框和右边的下拉选择框不在同一水平线上。
二、观察现象
可以看到行元素内的子元素顶部都是对齐的，而且下拉选择框的顶部和行的顶部是有间隙的，因此问题就出现在对齐的属性上。
三、修改CSS属性
增加下拉选择框的垂直对齐属性，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
style="vertical-align: top;"
四、结果
【解决方法】element-ui 中输入框input与下拉选择框没有在一条水平线上
2022-10-20
567
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
【解决方法】element-ui 中输入框input与下拉选择框没有在一条水平线上
相关文章
|
JavaScript
VUE element-ui之el-form表单点击按钮自动增加表单（输入框），可新增删除
VUE element-ui之el-form表单点击按钮自动增加表单（输入框），可新增删除
1891
0
1
|
1月前
|
1月前
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
66
0
0
|
11月前
|
JavaScript
|
JavaScript
|
JavaScript
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
536
0
0
|
JavaScript
|
JavaScript
|
JavaScript
热门文章
最新文章
1
基于Material Design风格开源、易用、强大的WPF UI控件库
2
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
3
安卓UI/UX设计原则：打造引人入胜的用户体验
4
Vue给Element UI的el-popconfirm绑定按钮事件
5
Android为什么不能在子线程更新UI
6
基于 LVGL 使用 SquareLine Studio 快速设计 UI 界面
7
【UI】 element ui 表格没有数据时用--填充
8
浅谈响应式编程在企业级前端应用 UI 开发中的实践
9
构建高效的安卓应用：使用Jetpack Compose优化UI开发
10
Android之UI基础控件
1
彩虹外链网盘界面UI美化版超级简洁好看
28
2
2024龙年新版ui周易测算网站H5源码/在线起名网站源码/运势测算网站系统源码
82
3
Airtest UI自动化框架 v1.1.4
30
4
【Linux】一站式教会：Ubuntu（无UI界面）使用apache-jmeter进行压测
48
5
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
32
6
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
17
7
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
16
8
纯技术讨论：如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
20
9
sap.ui.comp.smartfilterbar.ControlConfiguration 中的 customControl property
13
10
SAP UI5 控件 customData 属性的应用介绍
35