css文本对齐（两个字和三个字对齐）

最新推荐文章于 2024-08-08 10:05:34 发布

原创最新推荐文章于 2024-08-08 10:05:34 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

css 专栏收录该内容

2 篇文章

订阅专栏

博客给出了效果图及解决方案，解决方案包含HTML代码和CSS代码，主要围绕前端开发中利用HTML和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>