17

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.

Tim
  • 8,669
  • 31
  • 105
  • 183

2 Answers2

17

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 -->
Sirko
  • 72,589
  • 19
  • 149
  • 183
  • 3
    how about ``? much cleaner – xiaoyi Feb 02 '13 at 16:39
  • @xiaoyi: Thank you. Not working as desired in IE9. Please see edited question. – Tim Feb 02 '13 at 17:43
  • 4
    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 Dec 01 '15 at 15:30
  • 2
    In PHP: echo " "; 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). – Rodrigo Dec 01 '15 at 15:40
  • @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. – Sirko Dec 01 '15 at 16:21
  • I thought that, since the HTML parser recognizes the tags, it knows they are different labels... but you're right, that's how they made it. – Rodrigo Dec 01 '15 at 18:44
9

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>
Elizabeth Amato
  • 471
  • 6
  • 9
  • 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! :) – flipflopmedia May 30 '17 at 13:50