Nowrap/Non interrompere la linea dopo un input

Question

Se sono presenti più ingressi (radio o opzioni) seguiti dall'etichetta, tutti sulla stessa riga. Come faccio a fare in modo che non rompa la linea dopo la radio, ma si rompa se necessario dopo l'etichetta.

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

mi viene in mente il confezionamento sia input e label in un span con nowrap, a meno di chiedersi se c'è un altro modo.

Answer 1

Questo dovrebbe fare il trucco:

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

Il tag <nobr> garantirà la pausa non accadrà tra il pulsante e l'etichetta.

Il modo CSS è anche possibile, il wrapping con un altro <span> e l'utilizzo di white-space: nowrap; dovrebbe funzionare correttamente.

Answer 2

Penso che questo sia quello che stai cercando: http://jsfiddle.net/catalinred/kNUaz/

Answer 3

Niente ha funzionato per me (o almeno così ho pensato, fino a quando ho riparato) ... La mia soluzione sporca era quindi quello di utilizzare le tabelle , 1 riga, più colonne. Potrebbe essere necessario regolare il padding/spaziatura.

Modifica: Avviso questo è un cattivo modo di fare le cose, ma se non funziona niente potrebbe essere d'aiuto.

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