HTML—字符实现中文的等宽对齐效果

博客

记录程序生涯的点滴,分享技术实践。

目录

背景

利用空格字符实现等宽下的中文两端对齐效果。

效果图

效果图

空格字符

 

 相信是大家最熟悉,也是用的次数最多的一个了吧。代表一个空格,确切的说是表示按下 space 键产生的空格。我们知道在 HTML 中,空格是不会累加的,按下再多的空格,只算 1 个,而我们的   就可以用来实现多个空格。

 

 我们的主角来了,尺寸单位为:占据的宽度是 1 个中文宽度,其他的效果和   一致。

 

 的尺寸则是他老大哥   的一半,占据的宽度是 1/2 个中文宽度

代码

.field {
  width: 90px;
}
.field--title {
  width: 100%;
}
1
2
3
4
5
6
<div class="field">
  <p class="field--title">&ensp;&ensp;人:</p>
</div>
<div class="field">
  <p class="field--title">资料概要:</p>
</div>
<div class="field">
  <p class="field--title">&emsp;&emsp;得:</p>
</div>
1
2
3
4
5
6
7
8
9

结语

有了上面的三种字符及实体,中文文字的对齐就能容易的实现啦!

链接

相关可用字符介绍

文档更新时间: 3/4/2019, 10:29:56 PM