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屋！