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ć!
2021-03-02 Dodaj komentarz
Udostępnij to

Nie znaleziono powiązanych wyników

    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>
    2021-03-02 0 0
    Udostępnij to
    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;
    
}
    2021-03-02 0 0
    Udostępnij to
    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.
    2021-03-02 0 0
    Udostępnij to
    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>
    2021-03-02 0 0
    Udostępnij to
    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ć.
    2021-03-02 0 0
    Udostępnij to
    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.
    2021-03-02 0 0
    Udostępnij to
    Dlaczego jest złożony? 0 odpowiedzi zostało zwiniętych

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

    Polityka prywatności: https://zweryfikowac.pl/Polityka-prywatnosci.pdf
    Copyright © 2023, All Rights Reserved