html 不同字数对齐,表单短标题不同字数两端对齐问题

方法一：利用letter-spacing属性和em

html

热门搜索电视机性感漂亮高跟鞋手机对齐牛仔裤小家碧玉家居

css

.hotsearch dd{

float: left;

line-height: 24px;

margin-right: 30px;

overflow: hidden;

text-align: center;

width: 4em; /*这个值是看最长能显示几个文字，如x，则为x em*/

}

.hotsearch dd a{

display:block;

}

.w2{

letter-spacing:2em; /*如果需要y个字两端对齐，则为(x-y)/(y-1),这里是(4-2)/(2-1)=2em */

margin-right:-2em; /*同上*/

}

.w3{

letter-spacing:0.5em; /*如果需要y个字两端对齐，则为(x-y)/(y-1),这里是(4-3)/(3-1)=0.5em */

margin-right:-0.5em; /*同上*/

}

}

方法二：利用透明字占位

空格

方法三：利用两端对齐属性

text-align:justify;

width:100px;

方法四：利用占位符

   一个空格的位置

   一个字符的位置

   半个字符的位置

此处需要注意的是在微信小程序中使用占位符只能在标签对内使用，

总结

以上是生活随笔为你收集整理的html 不同字数对齐,表单短标题不同字数两端对齐问题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。