チェックボックスの下にテキストが折り返されないようにする

Question

私は一連のチェックボックスをレイアウトしていますが、テキストが長すぎる場合はチェックボックスの下に古いテキストラッピング問題を実行しています。

マイHTML：

<div class="right"> 
    <form id="updateProfile"> 
     <fieldset class="checkboxes"> 
      <p>4. What is your favorite type of vacation?</p> 
      <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label> 
      <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label> 
      <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label> 
      <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label> 
      <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label> 
      <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label> 
      <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label> 
      <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label> 
      <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label> 
      <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label> 
      <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label> 
     </fieldset> 
    </form> 
</div> 

マイCSS：

div.right{width:580px;} 

form#updateProfile fieldset label{ 
    display: block; 
    margin-bottom: 5px; 
    font-size: 16px; 
    float: left; 
    width: 33%; 
} 

ここに私のバイオリンを参照してください：http://jsfiddle.net/fmpeyton/7WmGr/

を大幅に異なるサイト上で検索した後、私は合理的に見つけることができないよう溶液。私はマークアップ/スタイルの変更に関する提案をしていますが、コードをできるだけクリーンでセマンティックなものにしたいと考えています。

ありがとうございます！

Answer 1

これは動作するようです：

http://jsfiddle.net/7WmGr/5/

は、私が label 18pxとチェックボックス-18pxの margin-leftの margin-leftを与えました。

HTML：

<div class="right"> 
    <form id="updateProfile"> 
     <fieldset class="checkboxes"> 
      <p>4. What is your favorite type of vacation?</p> 
      <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label> 
      <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label> 
      <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label> 
      <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label> 
      <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label> 
      <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label> 
      <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label> 
      <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label> 
      <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label> 
      <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label> 
      <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label> 
     </fieldset> 
    </form> 
</div> 

CSS：

div.right{width:598px;} 

form#updateProfile fieldset label{ 
    display: block; 
    margin-bottom: 5px; 
    font-size: 16px; 
    float: left; 
    width: 30%; 
    margin-left:18px; 
} 
form#updateProfile fieldset label input[type='checkbox']{margin-left:-18px;} 

はクローム& IE9で動作しているようです。

Answer 2

1つのオプションは、このようなものです。ここ

form#updateProfile fieldset label{ 
    display: block; 
    margin-bottom: 5px; 
    font-size: 16px; 
    float: left; 
    width: 30%; 
    padding-left: 3%; 
    position: relative; 
} 

input { 
    position: absolute; 
    left: -5px; 
} 

デモ：http://jsbin.com/opoqon/1/edit

私はそれを行う傾向にある方法ではなく、その後簡単にスタイリングすることができます

<input id="ski-trips" type="checkbox" name="vacation" value="Ski Trips"><label for="ski-trips">Ski Trips</label> 

ようなものをやって、labelsでinputsをラッピングされていない、異なっています。ここで

はその方法の一例です：http://jsbin.com/otezut/1/edit

しかし、どちらの方法が働くだろう。

Answer 3

これは別のオプションです。それは非常に簡単で効果的です。 ラッピングの部分を取る。 <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational <span class="antiWrap">trips</span></label>とし、クラスを含むスパンを追加します。私はクラスのアンチラップと呼ばれました。次に、あなたはそれに左のマージンを追加するためにCSSを使用します。 .antiWrap { margin-left: 18px; }ここにあなたのコードを使ってmyfiddleがあります。 http://jsfiddle.net/alexhram/7WmGr/3/私はそれがあなたのために行くと思いますか？お知らせ下さい。

Answer 4

私はこれが好きです...

HTML：

<input type="checkbox" name="vacation" value="Ski Trips"><label>very long label ...</label> 

CSS：

input[type="checkbox"] { 
    position: absolute; 
} 
input[type="checkbox"] ~ label { 
    padding-left:1.4em; 
    display:inline-block; 
} 

Answer 5

ここで入力要素の大きさにあまり依存だ一つです。

div {width: 12em;} 
 

 
label { 
 
    display: block; 
 
    white-space: nowrap; 
 
    margin: 10px; 
 
} 
 

 
label input { 
 
    vertical-align: middle; 
 
} 
 

 
label span { 
 
    display: inline-block; 
 
    white-space: normal; 
 
    vertical-align: top; 
 
    position: relative; 
 
    top: 2px; 
 
}

<div> 
 

 
<label><input type="radio"><span>I won't wrap</span></label> 
 
<label><input type="checkbox"><span>I won't wrap</span></label> 
 

 
<label><input type="radio"><span>I am a long label which will wrap</span></label> 
 
<label><input type="checkbox"><span>I am a long label, I will wrap beside the input</span></label> 
 

 
</div>