Prevenire il testo dall'avvolgimento sotto una casella di controllo

Question

Sto setando un set di checkbox e sto correndo attraverso l'annoso problema del text wrapping sotto una casella di controllo se il testo è troppo lungo.

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

mio CSS:

div.right{width:580px;} 

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

Vedere mio violino qui: http://jsfiddle.net/fmpeyton/7WmGr/

Dopo molte ricerche su siti diversi, io non riesco a trovare un ragionevole soluzione. Sono aperto a suggerimenti su come cambiare il mio markup/stili, ma vorrei mantenere il codice il più pulito e semantico possibile.

Grazie!

Answer 1

Questo sembra funzionare:

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

ho dato il label un margin-left di 18px e le caselle di controllo di un margin-left di -18px.

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

sembra funzionare in Crome & IE9.

Answer 2

Un'opzione sarebbe una cosa come questa.

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

Demo qui: http://jsbin.com/opoqon/1/edit

Il modo tendo a farlo è diverso, che non è avvolgendo inputs con labels, piuttosto facendo qualcosa di simile

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

che permette poi per lo styling più facile .

Ecco un esempio di quel modo: http://jsbin.com/otezut/1/edit

Ma in entrambi i casi avrebbe funzionato.

Answer 3

Questa è un'altra opzione. È molto semplice ma efficace. Prendi la parte che sta avvolgendo. <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational <span class="antiWrap">trips</span></label> e aggiungi una durata con una classe. Ho chiamato la classe antiWrap. Quindi usi CSS per aggiungere un margine sinistro a questo come. .antiWrap { margin-left: 18px; } Ecco myfiddle basato sul codice. http://jsfiddle.net/alexhram/7WmGr/3/ Penso che sia quello che stai cercando? Fammi sapere.

Answer 4

Mi piace questo ...

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

Ecco uno che è meno dipendente dalla dimensione degli elementi di input.

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>