web-dev-qa-db-ja.com

コンテンツがフローレイアウトで折り返されるときに、ラジオボタンまたはチェックボックスとそのラベルを一緒に保つ方法

ブラウザウィンドウが狭くなるにつれてテキストが折り返されるときにラジオボタン（）またはチェックボックス[]とそのラベルを一緒に保つ方法。これにより、次のようになりません。

          [ ] 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>...が、うまくいきませんでした。

htmlcsscheckboxradio-buttonflowlayout
14
Tim

両方を<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 -->
12
Sirko

入力とラベルを<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>
8
Elizabeth Amato