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

先看一个效果图吧:

这里写图片描述

这里有几个字段,每一行字的个数都不一样,要左右对齐。
之前是通过加空格或者&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
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值