Zapobieganie zawijaniu tekstu pod polami wyboru

Question

Układam zestaw pól wyboru i używam odwiecznego wydania tekstu pod polem wyboru, jeśli tekst jest zbyt długi.

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

Moje CSS:

div.right{width:580px;} 

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

Zobacz moje skrzypce tutaj: http://jsfiddle.net/fmpeyton/7WmGr/

Po wielu poszukiwaniach w różnych miejscach, nie mogę wydawać się znaleźć rozsądny rozwiązanie. Jestem otwarty na sugestie dotyczące zmiany moich znaczników/stylów, ale chciałbym, aby kod był jak najbardziej czysty i semantyczny.

Dzięki!

Answer 1

To wydaje się działać:

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

dałem labelmargin-left od 18px i wyboru margin-left z -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;} 

wydaje się działać w Crome & IE9.

Answer 2

Jedna opcja byłaby czymś takim.

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 tutaj: http://jsbin.com/opoqon/1/edit

Sposób staram się zrobić to jest inny, który nie jest owijanie inputs z labels, a robi coś jak

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

co pozwala następnie na łatwiejszej stylizacji .

Oto przykład tej drodze: http://jsbin.com/otezut/1/edit

Ale tak czy inaczej będzie działać.

Answer 3

To jest inna opcja. To bardzo proste, ale skuteczne. Bierzesz część, która się zawija. <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational <span class="antiWrap">trips</span></label> i dodajesz zakres z klasą. Nazwałem klasę antiWrap. Następnie użyj css, aby dodać do niego lewy margines. .antiWrap { margin-left: 18px; } Oto myfiddle na podstawie twojego kodu. http://jsfiddle.net/alexhram/7WmGr/3/ Myślę, że o to właśnie chodzi? Daj mi znać.

Answer 4

Podoba mi się to ...

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

Oto jeden to mniej zależne od wielkości elementów wejściowych.

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>