表单label文字两端对齐

image.png

查看DEMO (兼容 IE 和 火狐)

为了增加美观，不同字数的文字两端对齐是很有必要，如上图

要实现两端对齐的效果很简单，主要会用到 text-align: justify 和 text-align-last: justify

html

    

        
密码
        
8888888888
    
    

        
用户名
        

            前端_逗叔
        
    
    

        
电子邮箱
        
[email protected]
    
    

        
手机号码
        
18888888888
    
    

        
喜欢的游戏
        
王者荣耀
    

css

.card {
    box-sizing: border-box;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    position: relative;
    background: #fff;
    border-radius: 2px;
    width: 350px;
    padding: 16px;
    margin: 0 auto;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-bottom: 24px;
}
.card .item {
    display: flex;
    height: 30px;
    align-items: center;
}
.item .label {
    width: 80px;
    text-align: justify;
    text-align-last: justify;
    display: block;
    word-break: break-all;
    text-justify: distribute;
    position: relative;
    padding-right: 8px;
}
.item .label:after {
    content:':';
    position: absolute;
    right: 0px;
}
.item .value {
    flex: 1;
    padding-left: 24px;
}

效果

image.png