使用內聯複選框列表控制文本換行

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/