Porównaj ceny domen i usług IT, sprzedawców z całego świata

Zapobiegaj zawijaniu tekstu pod polem wyboru


Rozstawiam kilka pól wyboru i natrafiam na odwieczny problem zawijania tekstu pod polem wyboru, jeśli tekst jest zbyt długi.
Mój HTML:
<div class="right">
<form id="updateProfile">
<fieldset class="checkboxes">
4. What is your favorite type of vacation? <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>

Mój 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
http://jsfiddle.net/fmpeyton/7WmGr/
/
Po wielu poszukiwaniach w różnych witrynach nie mogę znaleźć rozsądnego rozwiązania. Jestem otwarty na sugestie zmiany moich znaczników/stylów, ale chciałbym, aby kod był tak czysty i semantyczny, jak to tylko możliwe.
Podziękować!
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

To wydaje się działać:
http://jsfiddle.net/7WmGr/5
http://jsfiddle.net/7WmGr/5/
/
Podałem
label
margin-left
o wartości 18px, a pola wyboru o
margin-left
o -18px.
Wydaje się, że działa w przeglądarce Chrome & amp; IE9.
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">
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;
}

<pre class="snippet-code-html lang-html prettyprint-override">
<div class="right">
<form id="updateProfile">
<fieldset class="checkboxes">
4. What is your favorite type of vacation? <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>
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Lubię 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;
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jedną z opcji byłoby coś takiego.
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
http://jsbin.com/opoqon/1/edit
Sposób, w jaki zwykle to robię, różni się od tego, że nie zawijam
danych wejściowych
etykietami
, ale robię coś w rodzaju
<input id="ski-trips" type="checkbox" name="vacation" value="Ski Trips"><label for="ski-trips">Ski Trips</label>

co z kolei ułatwia stylizację.
Oto przykład:

http://jsbin.com/otezut/1/edit
http://jsbin.com/otezut/1/edit
Ale i tak zadziała.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Oto taki, który jest mniej zależny od rozmiaru elementów wejściowych.
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">
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;
}

<pre class="snippet-code-html lang-html prettyprint-override">
<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>
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

To jest inna opcja. To bardzo proste, ale skuteczne.
Ty bierzesz część, która się kończy.
& < label & > & < input type = "checkbox" name = "wakacje" value = "Historyczne i edukacyjne wycieczki" & > Historyczne i edukacyjne & < span class = "antiWrap" & > wycieczki & </span & > & </label & >
i dodajesz odstęp z klasą. Nazwałem klasę antiWrap. Następnie dodasz do niego lewy margines za pomocą css. .antiWrap {margin-left: 18px; } tutaj jest myfiddle na podstawie użycia twojego kodu.

http://jsfiddle.net/alexhram/7WmGr/3/
http://jsfiddle.net/alexhram/7WmGr/3/
Myślę, że to jest to, do czego zmierzasz? Daj mi znać.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Wypróbowałem wszystkie opcje i najlepszym rozwiązaniem było:
<div>
<label><input type="checkbox"><span>Text</span></label>
<label><input type="checkbox"><span>Text</span></label>

- 35 zgodnie z sugestią Pudiki i Phillipa.
W CSS ustawiasz tylko
float: left
na
checkbox
, a aby zapobiec zawijaniu się tekstu wokół pola wyboru, możesz po prostu użyć
overflow: hidden
na
span
.
[type="checkbox] {
float: left;
}
span {
overflow: hidden;
}

Możesz użyć
margin-left
, aby nadać żądaną przestrzeń między tekstem a polem wyboru.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się