Обработка текстовой упаковки со встроенным списком флажков

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/