Nowrap / Don't break the line after a input

Question

If i have several input (radio or option) followed by their label, all on the same line. How i make it so it don't break the line after the radio, but break if needed after the label.

<input type="radio" id="i1"/><label for="i1">First radio</label>
<input type="radio" id="i2"/><label for="i2">Second radio</label>
<input type="radio" id="i3"/><label for="i3">Third radio</label>

I can think of wrapping both input and label in a span with nowrap, but wonder if there's another way.

Answer 1

This should do the trick:

#MyDiv {width: 250px;}

<div id="MyDiv">
    <nobr><input type="radio" id="i1"/><label for="i1">First radio</label></nobr>
    <nobr><input type="radio" id="i2"/><label for="i2">Second radio</label></nobr>
    <nobr><input type="radio" id="i3"/><label for="i3">Third radio</label></nobr>
</div>

The <nobr> tag will ensure the break won't happen between the button and label.

CSS way is also possible, wrapping it with another <span> and using white-space: nowrap; should work fine.

Answer 2

I think this is what you're looking for: http://jsfiddle.net/catalinred/kNUaz/