css - checkbox的文字不一样长,怎么设置能保证整齐还能显示所有文字?
本文介绍了css - checkbox的文字不一样长,怎么设置能保证整齐还能显示所有文字?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
在一个div里,有n个checkbox,后面的文字有长有短,很多差距都很大而且是动态添加,不知道长得有多长,如果把每个checkbox放在一个div里设定宽度,又不能隐藏剩下的信息,也不能设置滚动条,有没有什么方法能设置它又整齐又能显示所有文字。
类似这种情况:
<div style="width: 300px; margin: 0 auto; margin-top: 300px;">
<input type="checkbox" name="chk">xxxx
<input type="checkbox" name="chk">xxxxxxxxxx
<input type="checkbox" name="chk">x
<input type="checkbox" name="chk">xxxxdcgfd
<input type="checkbox" name="chk">xx
<input type="checkbox" name="chk">xxxxdg
<input type="checkbox" name="chk">xxxxdfgfghhn
<input type="checkbox" name="chk">xxxxvcb
<input type="checkbox" name="chk">xxxxdfgsfg
<input type="checkbox" name="chk">xxxxfgbvf
</div>
解决方案
checkbox后面的文字可以用span标签包裹,然后获取span标签的offsetwidth
这篇关于css - checkbox的文字不一样长,怎么设置能保证整齐还能显示所有文字?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文