Element-Plus表单label实现两端对齐(左右对齐)

项目场景:

提示:这里简述项目相关背景:
在使用Element-Plus的form的时候,label只有左右,居中对齐,缺少两端对齐的选项
故研究一下如何实现,其他方法也试过,都没效果,我在别人的基础上又研究了一下


问题描述

要求是表单label实现两端对齐

默认这个样子

在这里插入图片描述

要求是表单label实现两端对齐,如下

在这里插入图片描述网上也是找了几种方法,发现在Element-Plus组件中不生效,自己有研究了一下


解决方案:

提示:这里填写该问题的具体解决方案:
display: inline-block这个我看别人都是加在伪类中,一开始我也是这么做的,发现没效果,所以又看了一下控制台,发现放在el-form-item__label才生效,可能是Element-Plus版本不同吧!

 /deep/ .el-form-item label:after {
  content: "";
  width: 100%;
}
 /deep/ .el-form-item__label {
 /* display: inline-block必须要有,不然布局出问题,之前我看别人都加在伪类中,我试了没效果 */
  display: inline-block;
  text-align: justify;
  text-align-last: justify;
}
/* 这里去除必选字段的*,这个符号会造成一定影响,去掉之后我用了li列表进行定位,在前面加上" * ". */
 /deep/ .el-form-item.is-required .el-form-item__label:before {
  content: none !important;
}

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

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

相关文章

【LeetCode: 54. 螺旋矩阵 | 模拟】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

前端学习基础知识

环境搭建 windows环境 nodejs版本管理工具NVM nvm全英文也叫node.js version management,是一个nodejs的版本管理工具。nvm和n都是node.js版本管理工具,为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。 安装学习访…

Leetcode刷题详解——N 皇后

1. 题目链接:51. N 皇后 2. 题目描述: 按照国际象棋的规则,皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上,并且使皇后彼此之间不能相互攻击。 给你一个整数 n …

qml编译多语言

qml编译多语言 windows下转换将qml需要转换内容提取转为.ts文件将.ts文件转换为.qm文件.qm文件可以用QTranslator::load进行使用 windows下转换 打开QT自带的 MinGW 控制台 将qml需要转换内容提取转为.ts文件 qml转换字段内容需要qsTr() 将qml转为 filename.ts 文件 转到程序…

电脑怎么录制视频,录制的视频怎么剪辑?

在现今数字化的时代,视频成为了人们日常生活中不可或缺的一部分。因此,对于一些需要制作视频教程、录制游戏或者是进行视频演示的人来说,电脑录屏已经成为了一个必不可少的工具。那么,对于这些人来说,如何选择一个好用…

Hikyuu 1.3.0 发布,高性能量化交易研究框架

Hikyuu 是一款基于 C/Python 的高性能开源量化交易研究框架,用于快速策略分析及回测。与其他量化平台或回测软件相比,具备: 超快的回测速度;对完整的系统交易理念进行抽象,并分解为不同的组件,通过重用不同…

C# Dictionary与List的用法区别与联系

C#是一门广泛应用于软件开发的编程语言,其中Dictionary和List是两种常用的集合类型。它们在存储和操作数据时有着不同的特点和用途。本文将详细探讨C# Dictionary和List的用法区别与联系,并通过代码示例进行对比,以帮助读者更好地选择适合自己…

React进阶之路(四)-- React-router-v6、Mobx

文章目录 ReactRouter前置基本使用核心内置组件说明编程式导航路由传参嵌套路由默认二级路由404路由配置集中式路由配置 Mobx什么是Mobx环境配置基础使用计算属性(衍生状态)异步数据处理模块化多组件数据共享 ReactRouter 前置 在一开始前端开发都是单…

电力输送、材料和互连领域即将发生巨大变化

在设备互连方面,铜无可匹敌。其低电阻率和高可靠性为业界提供了出色的片上互连和芯片间连线服务。但在逻辑芯片中,随着互连堆栈上升到14级范围,并且阻容(RC)延迟在总延迟中所占的比例越来越大,晶圆厂正在寻求替代金属来维持性能。…

使用ffmpeg 压缩视频

我有一批1080p的视频,在网上播放占用空间太大,需要进行压缩以后再上传,下面是记录一下ffmpeg命令的使用情况 原视频大小:288mb --压缩加修改分辨率 640p ffmpeg -y -i C4995.mp4 -vcodec libx264 -crf 18 -s vga C4995\C4995_2.MP4 -y: 强制覆盖 -i :输入文件 -vcodec lib…

vue3+antv2.x的画布

报错信息: TypeError: Cannot destructure property component of registry_1.shapeMaps[node.shape] as it is undefined. at VueShapeView.renderVueComponent (http://192.168.10.35:9029/node_modules/.vite/deps/antv_x6-vue-shape.js?v49fbfab0:5569:19…

(动手学习深度学习)第7章 批量规范化(Batch Normalization)

BN 总结 批量归一化固定小批量中的均值和方差,然后学习出适合的偏移和缩放。可以加速收敛速度,但一般不改变模型精度。 BN代码手动实现 导入相关库 import torch from torch import nn from d2l import torch as d2l定义BN层 def batch_norm(X, gam…

【FGPA】Verilog:移位寄存器 | 环形计数器 | 4bit移位寄存器的实现 | 4bit环形计数器的实现

目录 Ⅰ. 理论部分 0x00 移位寄存器(Shift Register) 0x01 环形计数器(Ring Counter) Ⅱ. 实践部分 0x00 移位寄存器(4-bit) 0x01 四位环形寄存器(4-bit) Ⅰ. 理论部分 0x00 …

如何在3dMax中使用MaxScript在视口中显示数据?

如何在3dMax中使用MaxScript在视口中显示数据? 详细的教程指南,介绍如何使用MaxScript在视口中直接显示对象名称、坐标和顶点索引等信息。 在本教程中,您将学习如何借助MaxScript在视口中直接显示对象信息或数据。 本教程介绍了如何显示简单的…

LeetCode算法题解(回溯、难点)|LeetCode51. N 皇后

LeetCode51. N 皇后 题目链接:51. N 皇后 题目描述: 按照国际象棋的规则,皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上,并且使皇后彼此之间不能相互攻击。…

[PyTorch][chapter 61][强化学习-免模型学习 off-policy]

前言: 蒙特卡罗的学习基本流程: Policy Evaluation : 生成动作-状态轨迹,完成价值函数的估计。 Policy Improvement: 通过价值函数估计来优化policy。 同策略(one-policy):产生 采样轨迹的策略 和要改…

【K8s集群离线安装-kubeadm】

1、kubeadm概述 kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具。这个工具能通过两条指令快速完成一个kubernetes集群的部署。 2、环境准备 2.1 软件环境 软件版本操作系统CentOS 7Docker19.03.13K8s1.23 2.2 服务器 最小硬件配置:2核CPU、2G内存…

19.5 Boost Asio 传输结构体

同步模式下的结构体传输与原生套接字实现方式完全一致,读者需要注意的是在接收参数是应该使用socket.read_some函数读取,发送参数则使用socket.write_some函数实现,对于套接字的解析同样使用强制指针转换的方法。 服务端代码如下所示 #incl…

「Verilog学习笔记」4位数值比较器电路

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点,刷题网站用的是牛客网 分析 这里要注意题目的“门级描述方式”,所以我们只能使用基本门电路:&,|,!,^,^~。 具体实现思路:通过真值表得出Y0 Y1 Y2的逻辑表达…

Vue3使用vue-print-nb插件打印功能

插件官网地址https://www.npmjs.com/package/vue-print-nb 效果展示: 打印效果 根据不同的Vue版本安装插件 //Vue2.0版本安装方法 npm install vue-print-nb --save pnpm install vue-print-nb --save yarn add vue-print-nb//Vue3.0版本安装方法: npm install vue3…