css文本对齐(两个字和三个字对齐)

效果图:

在这里插入图片描述

解决方案:

1.html代码

	<div style="display: flex">
		 <!-- span标签助阵(必须有) -->
 		<div class="user_info">姓名<span></span></div>
		<div>:测试人员</div>
	</div>
	<div style="display: flex">
		<div class="user_info">身份证<span></span></div>
		<div>:123456789123456789</div>
	</div>

2.css代码

<style lang="scss" scoped>
.user_info {
  width: 50px;
  height: 25px;
  text-align: justify;     //主要对齐属性
  span {
    display: inline-block 
    padding-left: 100%;
  }
}
</style>
posted @ 2023-03-29 15:16  wangjieblog  阅读(82)  评论(0)    收藏  举报  来源