Nowrap / Don't break the line after a input

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 开发者_如何学JAVAlabel.

<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.

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.

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

Nothing worked for me (or at least I thought so, until I fixed it)... My dirty solution therefore was to use the tables, 1 row, multiple columns. You may need to adjust the padding/spacing.

Edit: Warning this is a bad way of doing things, but if nothing works it might help.

                        <table border="0"  >
                            <tbody>
                            <tr>
                                <td><input name="gender" type="radio" value="male" checked> Male </td>
                                <td><input name="gender" type="radio" value="female"> Female </td>
                            </tr>
                            </tbody>
                        </table>