表单label文字两端对齐

image.png

查看DEMO (兼容 IE 和 火狐)

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

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

html

<div class="card">
    <div class="item">
        <div class="label">密码</div>
        <div class="value">8888888888</div>
    </div>
    <div class="item">
        <div class="label">用户名</div>
        <div class="value">
            <a href="https://intolearn.com/">前端_逗叔</a>
        </div>
    </div>
    <div class="item">
        <div class="label">电子邮箱</div>
        <div class="value">8888888@qq.com</div>
    </div>
    <div class="item">
        <div class="label">手机号码</div>
        <div class="value">18888888888</div>
    </div>
    <div class="item">
        <div class="label">喜欢的游戏</div>
        <div class="value">王者荣耀</div>
    </div>
</div>

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