关于element的form的label的文字两端对齐.

在使用elementUI的form的时候,label只有左右,居中对齐.但是为了准确无误的完成UI给的高保真,(本人也觉得当时两端对齐好看一点).所以就去找了一下,居然都没这个话题......(可能是问题太简单了.),我就自己修改了一下代码,下面放出来,自己记忆,和供有用的人参考一下.


下面是修改了样式之前的样子

关于element的form的label的文字两端对齐._第1张图片

代码:

 .info-form>>>.el-form-item label:after {
        content: " ";
        display: inline-block;
        width: 100%;
    }

    .info-form>>>.el-form-item__label {
        text-align: justify
    }
    /* 这里去除必选字段的*,这个符号会造成一定影响,去掉之后我用了li列表进行定位,在前面加上" * ". */
    .info-form>>>.el-form-item.is-required .el-form-item__label:before {
        content: none !important;
    }

注:info-form是我这个form表单的上级元素.(为了不影响全局的样式,) ">>>",这个是深度选择器,可以在style 为scoped的时候找到你的dom进行修改.


下面是效果图

关于element的form的label的文字两端对齐._第2张图片

别喷我!

转载于:https://www.cnblogs.com/niluiquhz/p/10512492.html

你可能感兴趣的:(关于element的form的label的文字两端对齐.)