come mantenere insieme il pulsante di opzione o la casella di controllo e il relativo contrassegno

Question

Come mantenere il pulsante di opzione() o la casella di controllo [] e l'etichetta insieme quando il testo si avvolge quando la finestra del browser viene resa più stretta, in modo che non finiamo con questo:

  [ ] pepperoni [ ] anchovies [ ] mushrooms [ ] 
      olives 

MODIFICA in risposta ai suggerimenti di nowrap. Grazie per il suggerimento. Quasi lì. Funziona perfettamente in Chrome, FF e Opera ma non in IE9. Quando la pagina CSS è label {white-space: nowrap} e il markup è:

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

il TD diventa fisso-larghezza in IE9; il TD non si restringono quando la finestra del browser è fatto più stretto, e ottengo questo:

  (] pepperoni () anchovies () mushrooms () olives 

quando ho bisogno di questo:

  () pepperoni () anchovies 
      () mushrooms () olives 

C'è qualche trucco supplementare per IE9? Ho provato a inserire uno span contenente uno spazio singolo tra le etichette: ...</label><span> </span><label>... ma non ha funzionato.

Answer 1

Surround entrambi con un contenitore <span> e impostare white-space: nowrap; su di esso.

<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

Come menzionato da @xiaoyi, si potrebbe anche utilizzare il <label> stesso come contenitore:

<label style="white-space: nowrap;"> <input type="checkbox" /> pepperoni</label> 
<!-- etc --> 

Answer 2

Usa di stile CSS per gestire questo, specificare la posizione di assoluta e dare manualmente le coordinate di posizione di ogni componente.

Answer 3

Set un'altezza rigoroso sulla casella di controllo in sé

<input type="checkbox" style="height:13px;"> 

Answer 4

si può avvolgere l'ingresso e l'etichetta in un <span> o avvolgere l'ingresso all'interno dell'etichetta. In entrambi i casi, il contenitore esterno (la campata o l'etichetta) deve avere lo stile white-space:nowrap; display:inline-block. Funziona su IE9 e su altri browser. Così il vostro markup finale dovrebbe essere:

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

O

<label style="white-space:nowrap; display:inline-block"> 
    <input type="checkbox" name="pizza" checked="true" 
    id="pepperoni" value="pepperoni"/> 
    pepperoni 
</label>