16

ラジオ ボタン ( ) またはチェックボックス [ ] とそのラベルをまとめて、ブラウザー ウィンドウが狭くなるにつれてテキストが折り返されるときに、次のようにならないようにする方法:

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

nowrap の提案に応じて編集します。提案をありがとう。もうすぐです。Chrome、FF、および Opera では完全に動作しますが、IE9 では動作しません。ページの CSSlabel {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>...が、うまくいきませんでした。

4

2 に答える 2

15

<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 -->
于 2013-02-02T16:23:41.193 に答える