Question

我有一个带有值的复选框列表。我希望显示它们，以便它们将换行到下一行，而不会从它的相关文本值中分割出一个复选框。

<ul>
    {% for c in categories %}
        <li>
            <input name="cat_checks" type="checkbox" value="{{c}}" />{{c}}
        </li>
    {%endfor %}
</ul>

Answer 1

首先，使用LABEL元素：

<label> <input type="checkbox" value="foo"> foo </label>

其次，为标签定义此css：

label { white-space:nowrap; }

现场演示： http://jsfiddle.net/4uhKp/

顺便说一句，在LABEL元素中包装复选框不仅适用于此问题，而且通常也是如此。这样，用户可以单击复选框旁边的文本（也在标签内）来切换复选框。

Answer 2

浮动每个li而不是将它们内联。

请在此处查看示例：http://jsfiddle.net/marcuswhybrow/afdrT/8/

使用内联复选框列表控制文本换行

2 个答案: