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
