element-ui Form 表单中使用Checkbox 多选框，label 标签与Checkbox的对齐问题

最新推荐文章于 2024-03-20 00:00:27 发布
最新推荐文章于 2024-03-20 00:00:27 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： element-ui 文章标签： ui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_67484664/article/details/130682336
版权
本文介绍了在使用 Element UI 的 Form 表单时遇到的 Checkbox 多选框与 label 文字对齐问题。通过分析项目代码，发现在 CSS 样式中，Checkbox 默认处于顶部对齐。为解决此问题，可以设置 CSS 属性 `vertical-align: middle` 来使 Checkbox 与 label 文字居中对齐，从而成功解决了表单对齐问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题描述

在element-ui 表单中结合多选框，el-form-item 的 label 标签文字与多选框文字不水平对齐。
在这里插入图片描述

项目代码

<el-form>
  <el-form-item :label="item.name" v-for="
最低0.47元/天 解锁文章
element中Table表格控件单选、多选功能进一步优化
weixin_41549971的博客
01-16 2144
element中Table表格控件单选、多选功能进一步优化
Element-UI组件之表单Form
TwentyOne__的博客
07-03 5681
Element-UI组件之表单FormRadio 单选框基础用法禁用状态单选框组按钮样式带有边框Checkbox 多选框基础用法禁用状态多选框组indeterminate 状态可选项目数量的限制按钮样式带有边框Input 输入框基础用法禁用状态可清空密码框带 icon 的输入框文本域可自适应文本高度的文本域复合型输入框尺寸带输入建议自定义模板远程搜索输入长度限制 Radio 单选框 基础用法 &...
label与checkbox上下对齐
cocosun
05-12 1091
将checkbox和label的样式都设置vertical-align:middle就行了 <label style="vertical-align:middle;">选中:</label> <input type="checkbox" class="check" name="status" checked="true" checked="checked" style="margin-top: -2px;zoom: 180%;vertical-align:middle;"
解决多个el-checkbox内容不对齐，限制一行六个
weixin_42190844的博客
09-29 8626
别问，问就是提的需求。因为原来就是无脑遍历数组，也没有想过超出一行，出现多个时，排列的问题。 原代码 因为有的项是两个字，有的三个字。字数不一样会导致上下不对齐。 对齐的问题可以给el-checkbox设定一个固定宽度来解决。 但这里要求一行六个，我还在想，这不是还得切割数组，分成多份6个再组合，再使用v-for进行遍历。 或者写样式，一行平分六份。 一想到这么麻烦就不想写， 这时候突然就想到可以借助el-col来快速实现。 一行默认是24列，那我只要每个el-checkbox都设置为el-col.
css关于checkbox和label水平对齐的问题 以及其他CSS小技巧逐步整理
czyhy的专栏
05-19 2232
我接受 就是将checkbox和label都设置vertical-align:middle就行了
关于checkbox与label对齐的设计
Zhongxiucheng的专栏
10-29 2224
测试vertical-align label{vertical-align:middle} .inputcheckbox{vertical-align:middle;} body{font-family:tahoma;font-size:12px;} 测试文字x 這是繁體中文 次回から自動的にログイン English Чужой
Element ui 丨el-checkbox-group 布局对齐
weixin_39142106的博客
03-20 2239
解决el-checkbox-group 布局对齐问题 方案一：通过el-row + el-col。方案二：通过设置flex布局实现。
2021-11-21 vue笔记-PC端框架:Element-UI组件库(二) element-ui常用组件的介绍和使用
GAARA
11-21 906
零.回顾 一.基本组件 0.有哪些基本组件? 1.layout布局:通过基础的 24 分栏，迅速简便地创建布局 有哪些布局? 示例:使用row组件和col组件+span进行基础布局 2.container布局容器:用于快速布局的容器组件,用户按需求复制相关网页结构的代码 容器组件的基本结构 常见页面布局 第一种 第二种 第三种 第四种(常用) 第五种 示例:使用第四种布局 二.表单组件 1.有哪些表单组件? 2.form表单:有输入框,选择器,单选框,多选框等控件组成,用以手机,校验,提交数据 有哪些表单?
组件-Element---Form （表单）
GU_AO_SHI_TAI_DU的博客
07-03 719
组件-Element—Form （表单） 组件—表单 典型表单 <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-for...
element让表单对齐
最新发布
03-08
在Element UI中实现表单元素的对齐主要依赖于`el-form`组件的相关属性配置。具体来说，通过调整`label-position`和`label-width`这两个重要属性可以有效控制表单内各元素之间的布局与对齐。 对于希望达到整体统一...
表单元素与提示文字无法对齐的解决方法(input,checkbox文字对齐）
12-09
样式： 复制代码代码如下: <style type=”text/css”> body { font-family: tahoma; font-size: 12px; } input[type=checkbox] { vertical-align: middle; padding: 2px; } label { vertical-align: middle; } </style> 使用示例： 复制代码代码如下: <input id=”Checkbox1″ type=”checkbox” /><label for=”Checkbox1″>文本内容</label>
vue el-form中添加el-checkbox多选框，实现将所选内容保存到后台，并能回显到前端的解决（如果有更好的方法欢迎评论）
m0_60282866的博客
03-14 1541
1、el-table的单元格不仅要能点击，而且需要显示后台数据(由于我保存的是数字形式到后台，但是展示到前端时需要将这些数字翻译成对应的中文)，下面的是一个简单的实现方法。2、点击完单元格出现dialog弹框，然后勾选相应的信息，点击保存就可以啦。最后也顺便说下这个一个单元格显示多行数据是如何实现的，很简单直接看代码。实现的效果图，证据这一栏可以点击。后台返回的数据主要是这个函数。以上的各种方法的代码。
input[type=“checkbox“]与label对齐解决办法
qq_40281230的博客
10-12 304
实现的代码如下：
关于input框对齐文字的一些总结
02-24 1492
1. 将文字第一字体设置为Tahoma； 2. 为input元素设置vertical-align:middle; 3. 为label元素设置vertical-align:middle;display:inline-block;
input[type="checkbox"]与label对齐
weixin_30569153的博客
01-08 155
　　项目中遇到文字与 checkbook 无法水平对齐, 源码如下: <div align='center'> <input type="checkbox" id="cbContinue" /> <label for="cbContinue" style="color:red; cursor:pointer;">添加成功后，窗...
input checkbox与label的文字的对齐
weixin_30553777的博客
11-20 181
首先看一下代码结构： <p class="needitem"> <input id="orgcode" type="checkbox" name="orgnizationreq" value="1" ><label for="orgcode">组织机构代码</label> </p> 示例图 从示例图看出没有对齐，使用 v...
checkbox和label文本垂直对齐
weixin_50866404的博客
03-20 600
以登录单选项为例： <div className={styles.check_options}> <input type='checkbox' /> <span>自动登录</span> </div> 父元素行高和高度一致： .check_options { line-height: 12px; height: 12px; } 设置checkbox ： .check_options > input {
解决多个el-checkbox内容折行对不齐问题（可以限制每行展示的个数）
migexiaoliang的博客
06-28 3665
有时候使用element的el-checkbox-group多个el-checkbox内容折行后不对齐，如下图所示：可以用样式来调整（可以限制每行展示的个数）实现代码： css代码： 代码解释： 鼠标悬停后展示全部 最终效果图：...
label内部文字与input（checkbox）对齐
irisrathem的博客
03-11 1174
百度好多方法解决对齐的都是input在label外面，在里面的还没人解决，今天记录一下解决方法，希望对你有用！ &lt;label&gt;&lt;input type="checkbox" style="vertical-align:middle;margin-bottom:5px"/&gt;文字对齐&lt;/label&gt; 其中margin-bottom-5px可以根据实际情况做小调整...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值