Element-Ui的Form表单:Label文本两端对齐,且必填项的*不影响布局

实现效果

1. HTML 结构

首先,确保你的 HTML 或 Vue 模板中有一个 el-form 组件,类似下面这样:

<div id="app">
  <el-form :model="form" label-width="100px">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" type="password"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
</div>

2. CSS 样式调整

你可以通过以下 CSS 来实现标签文本的两端对齐。这里使用了 text-align: justify 和伪元素技巧来达到两端对齐的效果。然后将通过对星号使用绝对定位的方式进行调整,使其不影响标签文本的对齐。此外,标签将使用 padding-left 来为星号预留空间:

.el-form-item__label {
  position: relative; /* 设置相对定位作为星号的定位基准 */
  text-align: justify;
  text-align-last: justify; /* 确保最后一行也两端对齐 */
  padding-left: 10px; /* 为星号预留空间 */
}

.el-form-item__label:before {
  content: '*';
  color: red;
  position: absolute;
  left: 0; /* 星号定位到标签最左侧 */
  top: 0; /* 调整垂直位置以适应行高 */
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/548683.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

平台工程在企业数字化转型中的战略价值

要建设成功、有弹性和面向未来的平台&#xff0c;需要做到这三点&#xff1a;了解需求、预测可能面临的挑战并制定经得起时间考验的解决方案。 了解需求是指理解利益相关者的要求和目标&#xff0c;无论他们是最终用户、开发人员还是平台生态系统中的其他相关方。这包括开展全面…

HTTPS 加密解密大致流程

HTTPS简介 在我们开始配置之前&#xff0c;让我们先了解一下HTTPS和它的重要性。 为什么选择HTTPS&#xff1f; 加密传输&#xff1a;通过SSL/TLS协议&#xff0c;确保数据在传输过程中不被窃听。认证身份&#xff1a;确保客户端与预期的服务器通信&#xff0c;防止中间人攻…

梵宁教育:全面解析设计课程,助力职场新人技能飞跃

在数字化浪潮席卷全球的今天&#xff0c;设计行业以其独特的魅力和无穷的创新力&#xff0c;成为职场新人竞相追逐的热门领域。梵宁教育&#xff0c;作为一家专注于设计教育的机构&#xff0c;以其全面而深入的设计课程&#xff0c;为职场新人提供了技能飞跃的有力支持。 梵宁…

vue3 el-table无表头

需要实现的样式 父组件 <template><div><!-- 表格组件 无表头 --><Table :label"tableData.label" :data"tableData.data" :querydata"tableData.querydata" :queryTitle"tableData.title"><template #o…

企业网站建设需要了解什么

在现代商业环境中&#xff0c;企业网站已经成为企业宣传、推广和销售的重要工具。企业网站的建设需要考虑多个因素&#xff0c;包括以下几个方面&#xff1a; 首先&#xff0c;了解企业的目标和定位。企业网站的建设应该围绕企业的目标和定位展开&#xff0c;以达到企业在市场中…

低代码开发平台权威推荐:创新开发、领跑市场!

Gartner是低代码领域的一家权威机构&#xff0c;该机构常常通过"魔力象限"的研究方法&#xff0c;评选全球范围内IT细分领域的产品&#xff0c;来帮助决策者提供重要的咨询建议。本文盘点了Gartner机构推荐的6款低代码平台&#xff1a;Zoho Creator、Mendix、Oracle、…

新零售门店、商品、会员管理指标体系总览

新零售&#xff0c;旨在打破传统零售业的边界&#xff0c;引入先进科技和数字化手段&#xff0c;通过整合线上线下渠道&#xff0c;全面提升用户体验&#xff0c;并实现更智能、高效、个性化的零售运营模式。这一模式不仅仅关注销售产品&#xff0c;更注重构建全方位的购物生态…

(BERT蒸馏)TinyBERT: Distilling BERT for Natural Language Understanding

文章链接&#xff1a;https://arxiv.org/abs/1909.10351 背景 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;预训练语言模型&#xff08;如BERT&#xff09;通过大规模的数据训练&#xff0c;已在多种NLP任务中取得了卓越的性能。尽管BERT模型在语言理解和生成…

【刷题笔记】第一天

两道贪心题 文章目录 [3106. 满足距离约束且字典序最小的字符串](https://leetcode.cn/problems/lexicographically-smallest-string-after-operations-with-constraint/)[3107. 使数组中位数等于 K 的最少操作数](https://leetcode.cn/problems/minimum-operations-to-make-me…

ubuntu安装python3.10

1. 官网下载源程序 2. 解压进入文件夹&#xff1a; ./configure --prefix/usr/local/python3/ 3. 编译安装&#xff1a; make && make install 4. 添加环境变量&#xff1a; vim ~/.bashrc PATH/usr/local/python3/bin:$PATH #保存后&#xff0c;刷新配置文件 sour…

HCIP的学习(8)

OSPF数据报文 OSPF头部信息&#xff08;公共固定&#xff09; 版本&#xff1a;OSPF版本&#xff0c;在IPv4网络中版本字段恒定为数值2&#xff08;v1属于实验室版本&#xff0c;v3属于IPv6&#xff09;类型&#xff1a;代表具体是哪一种报文&#xff0c;按照1~5排序&#xff…

C++从入门到精通——类的6个默认成员函数之赋值运算符重载

赋值运算符重载 前言一、运算符重载定义实例注意要点 二、赋值运算符重载赋值运算符重载格式赋值运算符重载要点重载要点传值返回和传址返回要点 三、前置和后置重载 前言 类的6个默认成员函数&#xff1a;如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么…

xcode c++项目设置运行时参数

在 Xcode 项目中&#xff0c;你可以通过配置 scheme 来指定在运行时传递的参数。以下是在 Xcode 中设置运行时参数的步骤&#xff1a; 打开 Xcode&#xff0c;并打开你的项目。在 Xcode 菜单栏中&#xff0c;选择 "Product" -> "Scheme" -> "E…

利驰软件亮相第二届全国先进技术成果转化大会

4月8日&#xff0c;第二届全国先进技术成果转化大会在苏开幕。省长许昆林出席大会开幕式并致辞。国家国防科工局局长张克俭&#xff0c;省委常委、苏州市委书记刘小涛分别致辞。 本次转化大会由江苏省国防科学技术工业办公室、苏州市人民政府、先进技术成果长三角转化中心主办…

无人棋牌室软硬件方案

先决思考 软件这一套确实是做一套下来&#xff0c;可以无限复制卖出&#xff0c;这个雀氏是一本万利的买卖。 现在肯定是有成套的方案&#xff0c;值不值得重做&#xff1f;为什么要重做&#xff1f; 你想达到什么效果&#xff1f;还是需要细聊的。 做这个东西难度不高&…

自动发版工具以及本地debug

# 定义变量 $jarFile "xxx.jar" $server "ip" $username "user" $password "password" $remoteHost "${username}${server}" $remoteFolderPath "path" $gitDir "$PSScriptRoot\..\.git" # 设置…

每日OJ题_BFS解决最短路①_力扣1926. 迷宫中离入口最近的出口

目录 力扣1926. 迷宫中离入口最近的出口 解析代码 力扣1926. 迷宫中离入口最近的出口 1926. 迷宫中离入口最近的出口 难度 中等 给你一个 m x n 的迷宫矩阵 maze &#xff08;下标从 0 开始&#xff09;&#xff0c;矩阵中有空格子&#xff08;用 . 表示&#xff09;和墙&…

汽车抗疲劳驾驶测试铸铁试验底座技术要求有哪些

铸铁平台试验台底座的主要技术参数要求 1、 试验台底座设计制造符合JB/T794-1999《铸铁平板》标准。 2、 试验铁底板及所有附件的计量单位全部采用 单位&#xff08;SI&#xff09;标准。 3、铸铁平台平板材质&#xff1a;用细密的灰口铸铁HT250或HT200&#xff0c;强度符…

默认图表太丑!?快来看看这个好看的绘图主题吧~~

有很多小伙伴经常私信给小编&#xff0c;问自己绘制的图表为啥没小编绘制的精美&#xff1f; 听到这句话&#xff0c;小编老脸一红&#xff0c;还是比较惭愧的&#xff0c;因为并不是像小伙伴说的那样对每一个图表元素都进行定制化涉及操作&#xff0c;是借助优秀的“第三方工具…

Python 正则表达式模块使用

目录 1、匹配单个字符 2、匹配多个字符 3、匹配开头结尾 4、匹配分组 说明&#xff1a;在Python中需要通过正则表达式对字符串进行匹配的时候&#xff0c;可以使用re模块 表达式&#xff1a;re.match(正则表达式&#xff0c; 要匹配的字符串) 有返回值说明匹配成功&#x…