jak zachować przycisk radiowy lub pole wyboru razem z jego etykietą, gdy treść zawija się w układzie przepływu?

Question

Sposób trzymania przycisku radiowego() lub pola wyboru [] razem z etykietą, gdy tekst zawija się, gdy okno przeglądarki jest węższe, aby nie kończy się to:

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

EDYCJA w odpowiedzi na sugestie nowogr. Dzieki za sugestie. Prawie na miejscu. Działa doskonale w Chrome, FF i Opera , ale nie w IE9. Gdy strona jest label {white-space: nowrap} CSS i znaczniki są:

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

TD staje stałej szerokości w IE9; TD nie kurczą się, gdy okno przeglądarki jest węższe i uzyskać w ten sposób:

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

kiedy muszę to:

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

Czy istnieje dodatkowy trick IE9? Próbowałem umieścić rozpiętość zawierającą pojedynczy odstęp między etykietami: ...</label><span> </span><label>..., ale to nie zadziałało.

Answer 1

Otocz obie z kontenerem <span> i ustaw na nim white-space: nowrap;.

<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

Jak wspomniano przez @xiaoyi, można również użyć <label> się jako pojemnika:

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

Answer 2

użyć CSS stylu zarządzać tym Określ pozycję jako absolutny i ręcznie podać współrzędne każdej pozycji komponentu.

Answer 3

Ustaw ścisły wysokość na samej

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

Answer 4

wyboru można owinąć wejście i etykiety w <span> lub owinąć wejście wewnątrz etykiety. Tak czy inaczej, zewnętrzny pojemnik (przęsło lub etykieta) powinien mieć styl white-space:nowrap; display:inline-block. Działa to w IE9, a także w innych przeglądarkach. Więc twój ostateczny znaczniki powinny być:

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

LUB

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