AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-10-20 929
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【解决方法】element-ui 中输入框input与下拉选择框没有在一条水平线上

一、问题复现


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

1666271499228.jpg


二、观察现象


1666271510563.jpg

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


三、修改CSS属性


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

style="vertical-align: top;"

四、结果


1666271536286.jpg

文章标签：
前端开发
关键词：
UI输入框
UI下拉
3oixkwas4wki6
目录
相关文章
Yaiba123
|
4月前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤，以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框，在输入时对列表选项进行过滤，并支持右键点击列表选项弹出菜单进行删除的功能。
Yaiba123
103 0
朝阳39
|
5月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
朝阳39
838 1
朝阳39
|
5月前
|
JavaScript
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
朝阳39
279 1
朝阳39
|
5月前
Element UI 源码改造 —— 自定义数字输入框的实现
Element UI 源码改造 —— 自定义数字输入框的实现
朝阳39
199 1
朝阳39
|
5月前
|
数据安全/隐私保护
Element UI 密码输入框--可切换显示隐藏，自定义图标
Element UI 密码输入框--可切换显示隐藏，自定义图标
朝阳39
228 0
朝阳39
|
5月前
Element UI 带快捷编辑的多行输入框（含光标位置的获取和指定）
Element UI 带快捷编辑的多行输入框（含光标位置的获取和指定）
朝阳39
35 0
朝阳39
|
5月前
Element UI 数字输入框的实现
Element UI 数字输入框的实现
朝阳39
197 0
朝阳39
|
5月前
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ？
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ？
朝阳39
265 0
朝阳39
|
5月前
Element UI 自定义/修改下拉弹窗的样式（如级联选择器的下拉弹窗样式）
Element UI 自定义/修改下拉弹窗的样式（如级联选择器的下拉弹窗样式）
朝阳39
510 0
fruge365
|
7月前
【UI】 elementui input输入框自动获取失去焦点
【UI】 elementui input输入框自动获取失去焦点
fruge365
535 1