how to keep radio-button or checkbox and its label together when content wraps in flow layout

Question

How to keep the radio button ( ) or checkbox [ ] and its label together when text wraps as the browser window is made narrower, so that we don't end up with this:

          [ ] pepperoni   [ ] anchovies   [ ] mushrooms    [ ]
          olives

EDIT in response to nowrap suggestions. Thanks for the suggestion. Almost there. It works perfectly in Chrome, FF, and Opera but not in IE9. When the page CSS is label {white-space: nowrap} and the markup is:

          <td>
          <div>
          <label>
          <input type="radio" name="pizza" checked="true" 
           id="pepperoni" value="pepperoni"  />pepperoni  </label>
          <label>
          <input type="radio" name="pizza"  
           id="anchovies" value="anchovies"  />anchovies  </label>
           <label>
          <input type="radio" name="pizza" 
           id="mushrooms" value="mushrooms"  />mushrooms  </label>
          <label>
          <input type="radio" name="pizza" 
           id="olives" value="olives"  />olives           </label>
          </div>
          </td>

the TD becomes fixed-width in IE9; the TD won't shrink when the browser window is made narrower, and I get this:

         ( ] pepperoni   ( ) anchovies   ( ) mushrooms   ( )  olives

when I need this:

          ( ) pepperoni   ( ) anchovies   
          ( ) mushrooms   ( ) olives

Is there any additional trick for IE9? I tried putting a span containing a single space between the labels: ...</label><span> </span><label>... but that did not work.

Solution 1

Surround both with a <span> container and set white-space: nowrap; on it.

<span style="white-space: nowrap;"> 
  <input type="checkbox" id="in1" /> 
  <label for="in1">pepperoni</label>
</span>
<span style="white-space: nowrap;"> 
  <input type="checkbox" id="in2" /> 
  <label for="in2">anchovies</label>
</span>
<span style="white-space: nowrap;"> 
  <input type="checkbox" id="in3" /> 
  <label for="in3">mushrooms</label>
</span>
<span style="white-space: nowrap;"> 
  <input type="checkbox" id="in4" /> 
  <label for="in4">olives</label>
</span>

EDIT

As mentioned by @xiaoyi, you could also use the <label> itself as the container:

<label style="white-space: nowrap;"> <input type="checkbox" />  pepperoni</label>
<!-- etc -->

Solution 2

You can wrap the input and label in a <span> or wrap the input inside the label. Either way, the outer container (the span or the label) should have style white-space:nowrap; display:inline-block. This works in IE9 as well as other browsers. So your final markup should be:

<span style="white-space:nowrap; display:inline-block"> 
  <input type="checkbox" name="pizza" checked="true"
   id="pepperoni" value="pepperoni" /> 
  <label for="pepperoni">pepperoni</label>
</span>

OR

<label style="white-space:nowrap; display:inline-block">
  <input type="checkbox" name="pizza" checked="true" 
   id="pepperoni" value="pepperoni"/>
  pepperoni
</label>

Comments

[xiaoyi]

how about <label><input type="textbox">xxx</label>? much cleaner

[Tim]

@xiaoyi: Thank you. Not working as desired in IE9. Please see edited question.

[Rodrigo]

Now it doesn't brake the line at all! The OP wants to break the line, but not between the radio and its label!

[Rodrigo]

In PHP: echo "<label style='white-space:nowrap'><input type='radio' name='radName' value='x'>xxx</label> "; Notice the space in the end. It only works if the space is there, what is somewhat strange (since the space is outside the label tag).

[Sirko]

@Rodrigo Without the space it looks like one long word to the HTML parser. Hence it does not insert any breaks. With the space it appears as several different words, which can be moved to the next line.

[Rodrigo]

I thought that, since the HTML parser recognizes the <label> and </label> tags, it knows they are different labels... but you're right, that's how they made it.

[flipflopmedia]

This worked for me! I went w/applying the two styles to "label" in my stylesheet, and voila! "white-space:nowrap;" alone did not work, but adding the display:inline-block;" too did the trick! Beautiful! :)