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

Question

我有一个带有值的复选框列表。我想要显示它们，以便它们将包装到下一行而不会从与其关联的文本值分离复选框。

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

Answer 1

首先，使用标签元素：

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

其次，定义这个CSS的标签：

label { white-space:nowrap; } 

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

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

Answer 2

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

在这里看到一个例子：http://jsfiddle.net/marcuswhybrow/afdrT/8/