elementUI 表单label两端对齐

elementUI 表单label两端对齐

第一种label没有带*号

修改之前
在这里插入图片描述修改之后(英文无效)
在这里插入图片描述
样式调整

.el-form-content{
  /deep/ .el-form-item__label{
    text-align: justify;
  }
  /deep/ .el-form-item__label::after{
     content: ' ';
     width: 100%;
     display: inline-block;
   }
}

第二种label带*号

修改之前 (可以看到 加上表单规则之后 之前写的样式有问题)
在这里插入图片描述
修改之后
在这里插入图片描述
样式调整(去掉form表单原有的label的星号,label用slot代替,添加after伪类。。。。。)
在这里插入图片描述

.el-form-content{
  /deep/ .el-form-item__label{
    text-align: justify;
  }
  /deep/ .el-form-item__label::after{
     content: ' ';
     width: 100%;
     display: inline-block;
   }
  /deep/ .el-form-item__label::before{
    display: none;
  }
  .slot_form_label{
    position: relative;
  }
  .slot_form_label::after{
     content: '*';
     width: 100%;
     display: inline-block;
     position: absolute;
     left: -10px;
     color: red;
  }
}

版权声明:本文为lm13532007498原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。