Контроль переноса текста со встроенным списком флажков

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/