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

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

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

技术分享图片

代码:

 .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进行修改.

下面是效果图

技术分享图片

别喷我!

文章来自:https://www.cnblogs.com/niluiquhz/p/10512492.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案:鲁ICP备09046678号-3