Geek Answers Handbook

Nowrap / Do not interrupt the line after entering

If I have several inputs (radio or option) followed by their label, all on the same line. How I did it so that he did not break the line after the radio, but after the mark if necessary

<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 a wrapper for both input and label in span with nowrap , but I wonder if there is another way.

+8
html css
source share
3 answers

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> ensures that the gap between the button and the label does not occur.

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

+14
source share

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

+1
source share

Nothing worked for me (or at least I thought so until I fixed it) ... So my dirty decision was to use tables, 1 row, several columns. You may need to adjust the space / spacing.

Edit: A warning is a bad way to do something, but if nothing works, it can 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>
0
source share

More articles:


All Articles