项目场景:
提示:这里简述项目相关背景:
在使用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;
}