如何保持單選按鈕或複選框及其標籤在內容在流佈局中環繞時

Question

如何在瀏覽器窗口縮小時使文本環繞時將單選按鈕（）或複選框[]及其標籤保留在一起我們並沒有以此結束：

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

編輯迴應nowrap建議。感謝您的建議。差不多了。它適用於Chrome，FF和Opera ，但不在IE9中。當頁面CSS是label {white-space: nowrap}和標記是：

  <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成爲IE9固定寬度;當由瀏覽器窗口窄，TD不會收縮，而我得到這個：

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

，當我需要這樣的：

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

是否有IE9任何額外的把戲？我嘗試了在標籤之間放置一個包含單個空格的跨度：...</label><span> </span><label>...但這沒有奏效。

Answer 1

包圍一個<span>容器並設置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> 

編輯

正如@xiaoyi提到的，​​你也可以使用<label>本身作爲容器：

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

Answer 2

使用CSS樣式來管理這個， 指定位置絕對並手動給出每個組件的位置座標。

Answer 3

集上的複選框本身

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

Answer 4

嚴格的高度你可以用輸入和標籤在<span>或包裝標籤內部的輸入。無論哪種方式，外部容器（跨度或標籤）應具有樣式white-space:nowrap; display:inline-block。這適用於IE9以及其他瀏覽器。所以，你最終的標記應該是：

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

OR

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