Как сохранить радиокнопку или флажок и его ярлык вместе при обтекании содержимого в макете потока

Как сохранить переключатель() или флажок [] и его ярлык вместе, когда текст обернется, когда окно браузера станет более узким, так что мы не закончим с этим:

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

EDIT в ответ на предложения 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>..., но это не сработало.

Ответ 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 -->

Ответ 2

Вы можете обернуть ввод и метку в <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>

ИЛИ

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

Ответ 3

Установите строгую высоту самого флажка

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

Ответ 4

Используйте стиль CSS для управления этим, Укажите положение как абсолютное и вручную задайте координаты положения каждого компонента.