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

【问题标题】：Control text wrapping with inline list of checkboxes使用内联复选框列表控制文本换行
【发布时间】：2011-01-05 22:16:00
【问题描述】：

我有一个带有值的复选框列表。我想显示它们，以便它们可以换行到下一行，而不会从关联的文本值中拆分复选框。

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

【问题讨论】：

标签： html css django checkbox html-lists

【解决方案1】：

首先，使用 LABEL 元素：

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

其次，为标签定义这个css：

label { white-space:nowrap; }

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：