prevent checkbox label from wrapping to opposite side of page

As you can see in the image below then when the browser window is resized the checkbox labels can wrap to the op开发者_运维技巧posite side of their ascociated checkboxes.

In the image above the label for checkbox 12 has wrapped and is at the opposite side of the screen. How can I make it so that each label stays with its checkbox?

Put the checkboxes in the label tags and give the label display: inline-block. Texts can be of any size, the "inline-block" keeps the text and checkbox together.

Demo (Resize your browser so 14 goes to the next line): http://jsfiddle.net/csYPu/

HTML:

<label><input type="checkbox">1</label>
<label><input type="checkbox">2</label>
<label><input type="checkbox">3</label>

CSS:

label {
    display: inline-block;
}

I would group the label and the checkbox in an element (li, div) and float them left.

Example:

css

ul {
  overflow: hidden;
}
li {
  float: left;
}

html

<ul>
  <li><input type="checkbox" name="box1" id="box1" value="1"><label for="box1">1</label></li>
  ...
  <li><input type="checkbox" name="box13" id="box13" value="1"><label for="box13">13</label></li>
</ul>