css - checkbox的文字不一样长，怎么设置能保证整齐还能显示所有文字？

Question

在一个p里，有n个checkbox，后面的文字有长有短，很多差距都很大而且是动态添加，不知道长得有多长，如果把每个checkbox放在一个p里设定宽度，又不能隐藏剩下的信息，也不能设置滚动条，有没有什么方法能设置它又整齐又能显示所有文字。

类似这种情况：

<p 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
    </p>

Answer 1

The text behind the checkbox can be wrapped with a span tag, and then the offsetwidth of the span tag is obtained

Answer 2

 <p>
 <span><input type="checkbox" name="chk">xxxx</span>
 ...
</p>

p > span {
 white-space: nowrap;
}

p {
  text-align: justify;
}

Answer 3

There is no way around this. To make it neat, you need to set the width.

Answer 4

Set the line-height
and then go to Baidu to see this attribute vertical-align, which can be used to achieve this neatness

Answer 5

It can only ensure that input and text are always together.

Solution: input + text plus label tag, and set the style inline-block

Answer 6

You can choose to wrap it with li tag

Answer 7

Add a style vertical-align:middle

Answer 8

I didn’t explain this problem clearly, because the data is dynamic, so I can only calculate the set width based on the longest data string passed in. However, when js calculates the string length using str.length, no matter Both Chinese characters and English characters are calculated as 1, so the length of the longest string can only be passed from the background. This is my current solution, I don't know if there is a better solution. Please give me some advice!