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

最新推荐文章于 2024-06-27 10:28:29 发布
最新推荐文章于 2024-06-27 10:28:29 发布
阅读量1.7k 收藏 3
点赞数 2
分类专栏： 前端应用 文章标签： 前端 css elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40657528/article/details/125871678
版权
本文介绍了如何解决在Element-UI框架下，输入框input与下拉选择框不在同一水平线上的问题。通过分析现象，发现是元素垂直对齐属性导致的。通过在下拉选择框样式中添加`vertical-align: top;`，成功实现了两者水平对齐，确保了界面的整洁和一致性。
摘要由CSDN通过智能技术生成

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

一、问题复现

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

二、观察现象

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

三、修改CSS属性

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

style="vertical-align: top;"

四、结果

在这里插入图片描述

追寻上飞
关注
专栏目录
Vue + ElementUi 实现input树型下拉框
mibi8840的博客
01-19 8431
页面效果： 1、页面要素： <!-- 树形下拉框 --> <template> <el-form :v-model="form" size="mini" > <el-row> <el-col :span='12'> <el-form-item label="选择
python进行windows系统UI自动化之【pyautoit】
weixin_43936332的博客
06-29 7585
一般以我们平时操作，会从下图上方的地址栏进行操作，这里注意可以直接从下方的文件名处，输入对应的绝对地址，如：F:\程序设计书籍\《啊哈！pyautoit 是一个用python写的基于AutoItX3.dll的接口库，用来进行windows窗口的一系列操作，也支持鼠标键盘的操作。点击上访的图标，进行拖拉，到想访问的位置，注意下图两个红框中的数值，上面的框表示页面的标题和类，下面的框表示控件的类和序号（一般连起来使用）打开Auto Window Info(x64)或Auto Window Info(x86)
element 下拉框如何套输入框？
浮生的博客
01-06 1437
代码如下： <el-form-item> <el-input v-model="formData.number" placeholder="请输入账号" clearable> <el-select v-model="formData.type" slot="prepend" placeholder="请选择类型"> <el-option label="微信" value="1"></el-option> <e
下拉选择输入框(基于elment-ui)
最新发布
lotpyve的博客
06-27 1146
不过我在网上看，其中有一篇的文章的，我觉得还不错，不过后面我发现有点麻烦，我懒得去细细研究他的做法，在这里我也提一下，有兴趣的可以自己去研究一下，他说的是，把 el-input 组件 和 el-select 放在一起，然后通过定位来把 el-input 放在 el-select 下拉选择的那里，其中 el-input。el-select 绑定一样的值。
element ui 下拉框位置显示错位
Qyzcxy的博客
02-17 1371
element ui 下拉框位置显示错位
elementUI el-input和el-select一起使用，高度不一致（同一分辨率，不同的缩放比）
qq_37892558的博客
04-06 2121
elementUI el-input和el-select一起使用，高度不一致（同一分辨率，不同的缩放比） 场景： 两个元素位于同一个父元素内，同一行 原因：父元素设置了一个固定的高度（height） 解决：去掉父元素的高度 ...
解决多个el-checkbox内容不对齐，限制一行六个
weixin_42190844的博客
09-29 8144
别问，问就是提的需求。因为原来就是无脑遍历数组，也没有想过超出一行，出现多个时，排列的问题。 原代码 因为有的项是两个字，有的三个字。字数不一样会导致上下不对齐。 对齐的问题可以给el-checkbox设定一个固定宽度来解决。 但这里要求一行六个，我还在想，这不是还得切割数组，分成多份6个再组合，再使用v-for进行遍历。 或者写样式，一行平分六份。 一想到这么麻烦就不想写， 这时候突然就想到可以借助el-col来快速实现。 一行默认是24列，那我只要每个el-checkbox都设置为el-col.
最全收集整理GitHub上受欢迎的Android UI Library
jessica_zc的博客
10-19 4453
抽屉菜单 ListView WebView SwitchButton 按钮 点赞按钮 进度条 TabLayout 图标 下拉刷新 ViewPager 图表(Chart) 菜单(Menu) 浮动菜单 对话框 空白页 滑动删除 手势操
GitHub 上受欢迎的 Android UI Library 整理二
Mob_com的博客
06-11 3841
通知 https://github.com/Tapadoo/Alerter ★2528 - 克服Toast和Snackbar的限制 https://github.com/wenmingvs/NotifyUtil ★920 - 高仿淘宝微信等热门APP通知视图 https://github.com/halysongoncalves/Pugnotification ★683 - 通过一行代码实现通知...
爬虫教程（ 5 ） --- Selenium 与 PhantomJS
墨鱼菜鸡
07-11 1369
1. Selenium 中式读法：【瑟林捏幕 】 Selenium( selenium 中文网：http://www.selenium.org.cn/ )是一个强大的网络数据采集工具，最初是为了网站自动化测试而开发的，被用来测试 Web 应用程序在不同的浏览器和操作系统上运行能力。 Selenium 不带浏览器，它需要与第三方浏览器结合在一起使用...
iview学习帮助文档
weixin_40885337的博客
03-25 3355
安装iview npm install view-design --save 导入iview 在main.js中导入iview import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css'; Vue.use(ViewUI); 按需引用iview组件 a.安装babel npm install babel-plugin-import --save-dev b.在 .babelrc 文件中 { "plugins
radio的选中圆圈与文字没有在同一条水平轴线的问题
qq_34965759的博客
01-19 620
HTML： <label><input type="radio" name="Y"/><p>是</p></label> <label><input type="radio" name="N"/><p>否</p></label> CSS： input[type='radio']{ vertical-align:middle; } label p{ display:
Vue2.x element-ui 的 input 组件中的 ＜el-autocomplete＞组件实现输入和联想并存的下拉功能
黄彪博客
09-30 2711
文章参考 input el-autocomplete 问题描述 工作中，遇到一个表单输入的问题，用户要输入公司名称，因此就需要从后台获取关联信息，由于公司信息很多，后台也没有办法完全穷尽，因此返回的提示信息也不全，综合考虑，该字段的最终录入方式 —— 后台提醒 + 用户自己输入 思考过程说明 第一种方案： 如果是要根据用户输入关键字搜索信息，选择用户信息，最常用的就属于 select filter 组件，问题是改组件无法获取用户输入的值，一旦失焦，就会清空用户输入的值 第二种方案： 依然是使用
element-ui】form表单设置label和input不在一行
qq_38210427的博客
05-23 404
新属性 label-position：top。
【Vue项目练习】文本不在同一水平线？(非强迫症误入！）
xptxhx的博客
11-10 749
今天做项目时因为强迫症，发现左右两行文字间小到不能再小的差异，看着有个1~3px的偏差，利用vertical-align:bottom顺利解决
写css时，input和其他元素不在同一条水平线上
Sai_BAN的博客
04-01 2649
** 1.input和别的元素在同一行不会对齐，他就不会别人对齐。 ** 误区一： 以为对齐了，其实没有，只不过aaaa和sdfbb的高度太小，所以貌似对齐了，把他的高度调到和input的高度一样就知道了，input是往下偏的。 2.怎么解决input和别人不一致的问题？ 答案：最好的办法是加上浮动，别忘了给父元素去除浮动 答案二：给被对齐的元素加上vertical-align：middle（...
el-form的label和el-input不在同一行
热门推荐
m0_46581222的博客
03-17 1万+
背景 太久没用原生的elementUI，遗忘故记录 问题一：单个el-input和el-form-item的label在同一行 方法一：给el-form-item设置label-width <el-form model="form" :rules="rules" class="form_class"> <el-form-item label="公文编号:" label-width="100px"> <el-input pl
input和button对不齐，错位问题
cwb_2120的博客
07-11 485
只需要在button上面加上一个 vertical-align: top; 这个属性就可以对齐了
vue+elementUI怎样实现input下拉框带图片，图文select
ALSO666的博客
02-08 2459
vue+elementUI怎样实现input下拉框带图片，图文select
element-ui input 输入框中 如何输入出现内容建议 简便写法
05-26
可以使用 `el-autocomplete` 组件来实现输入框内容建议的功能。它可以自动匹配用户输入的关键词，并在下拉框中显示匹配的结果。下面是一个示例： ```html <template> <div> <el-autocomplete v-model="inputValue" :fetch-suggestions="querySearch" placeholder="请输入关键词" @select="handleSelect"> <template slot-scope="{ item }"> {{ item.value }} </template> </el-autocomplete> </div> </template> <script> export default { data() { return { inputValue: '', suggestions: ['HTML', 'CSS', 'JavaScript', 'Vue', 'React', 'Angular'] } }, methods: { querySearch(queryString, cb) { let suggestions = this.suggestions.filter(item => { return item.toLowerCase().indexOf(queryString.toLowerCase()) !== -1 }) cb(suggestions) }, handleSelect(item) { console.log(item) } } } </script> ``` 在这个示例中，我们使用了 `el-autocomplete` 组件，并将输入框的值绑定到了 `inputValue` 变量上。`fetch-suggestions` 属性指定了一个方法，用于根据用户输入的关键词查询匹配的结果。在 `querySearch` 方法中，我们使用了 `filter` 方法来过滤出匹配的结果，并将结果传递给回调函数 `cb`。最后，在 `handleSelect` 方法中可以获取用户选择的结果。 通过使用 `el-autocomplete` 组件，我们可以很方便地实现输入框内容建议的功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

追寻上飞

鼓励一下这只勤劳的小蜜蜂吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值