表单文字个数不同左右对齐方式

原创于 2017-09-21 09:50:47 发布 · 3.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#表单 #对齐方式

前端技术-css 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用CSS letter-spacing属性实现文字左右对齐的方法。通过计算不同行文字数量的差异，调整字间距使得即使每行字数不一也能整齐排列。文章详细解释了如何根据最大字数与实际字数计算letter-spacing的具体值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看一个效果图吧：

这里写图片描述

这里有几个字段，每一行字的个数都不一样，要左右对齐。
之前是通过加空格或者&nbsp来实现，但是兼容以及效果都不怎么样。

x = 所有行中要放字数的最大值；//这个例子中我的x是4
y = 当前行要放的字数值； //本例中，第一行和倒数第二行是2，最后一行是3，其他行是4。

给字数相同的行给定相同样式类
并添加样式，因为我有三种情况，所以要设置三种样式。

.four{
    letter-spacing: 0em //  (x-y)/(y-1) => (4-4)/(4-1) = 0,所以当前值为0
}
.three{
    letter-spacing: 0.5em //  (x-y)/(y-1) => (4-3)/(3-1) = 0.5,所以当前值为0.5em
}
.two{
    letter-spacing: 2em //  (x-y)/(y-1) => (4-2)/(2-1) = 2,所以当前值为2em
}