チェックボックスのインラインリストを使用した制御テキストの折り返し

Question

値のあるチェックボックスのリストがあります。私はそれらを表示して、チェックボックスを関連するテキスト値から分割せずに次の行に折り返すようにしたい。

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

Answer 1

まず、LABEL要素を使用します：

label { white-space:nowrap; } 

ライブデモ：

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

セカンドを、ラベルのこのCSSを定義

ここでの例を参照してください。http://jsfiddle.net/4uhKp/

btw、LABEL要素のラッピングチェックボックスは、この問題だけでなく一般的にも有効です。これにより、ユーザーは、チェックボックスの横にあるテキスト（ラベル内にある）をクリックして、チェックボックスを切り替えることができます。

Answer 2

フロート各liをインラインにするのではなく、フロートします。 http://jsfiddle.net/marcuswhybrow/afdrT/8/が