使⽤CSS达到⽂字⾸尾对齐效果
在制作表单的时候经常会遇到需要不同个数的⽂字⾸尾对齐，⽐如：
<span>姓名：</span>
<span>联系⽅式：</span>
姓名：
联系⽅式：
有些⼈会使⽤直接在姓名之间添加 (No Break space)的⽅式来达到对齐效果例如：
<span>姓       ；名：</span>
<span>联系⽅式：</span>css特效文字
姓      名：
联系⽅式：
使⽤这种⽅式是错误的，且不说代码整洁程度如何，在不同的字体类型下⼀个 宽度可能是不同的。有时候⼀个⽂字需要两个，有时候是三个甚⾄⽆法换算（类似于1.2个）。
在这⾥介绍⼀种通⽤的使⽤CSS达到效果的⽅式：
<style>
span{
width:5em;
}
span::after{
content:'';
display:inline-block;
width:100%;
}
</style>
<span>姓名：</span>
<span>联系⽅式：</span>
只需给span标签添加宽度并添加⼀个伪类即可实现相应效果
笔者发现这个⽅法对浏览器有要求，⽬前chrome下和部分firefox浏览器下可以正常使⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。