Control text wrapping with inline list of checkboxes

I have a list of checkboxes with values. I want display them so that they will wrap to the next line without splitting a ch开发者_Go百科eckbox from it's associated text-value.

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

---

First, use a LABEL element:

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

Second, define this css for the label:

label { white-space:nowrap; }

Live demo: http://jsfiddle.net/4uhKp/

btw, wrapping check boxes in LABEL elements is good not just for this issue, but generally. That way, the user can click on the text next to the check box (which is also inside the label) to switch the check box.

---

Float each li instead of making them inline.

See an example here: http://jsfiddle.net/marcuswhybrow/afdrT/8/