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

项目场景:

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


问题描述

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

默认这个样子

Element-Plus表单label实现两端对齐(左右对齐)_第1张图片

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

Element-Plus表单label实现两端对齐(左右对齐)_第2张图片网上也是找了几种方法,发现在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;
}

你可能感兴趣的:(vue.js,前端,javascript)