使用 text-align: justify + span 仅实现两个字和三个字对齐效果
<div class="user_info">姓名<span></span></div>
<div class="user"> :测试人员 </div>
.user_info {
width: 50px;
height: 25px;
line-height: 25px;
text-align: justify;
}
.user_info span {
display: inline-block;
width: 10px;
height: 10px;
padding-left: 20px;
background-color: rgb(43, 105, 105);
}
效果如图:
改进: 让.user_info盒子浮动起来,即加上 float: left;