Empêche le texte d'être enveloppé sous une case à cocher

Je suis de l'élaboration d'un ensemble de cases à cocher et je suis en cours d'exécution à travers le vieux problème de l'habillage de texte en dessous une case à cocher si le texte est trop long.

Mon code 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>

Mon CSS:

div.right{width:580px;}

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

Voir mon violon ici: http://jsfiddle.net/fmpeyton/7WmGr/

Après beaucoup de recherches sur différents sites, je n'arrive pas à trouver une solution raisonnable. Je suis ouvert pour des suggestions sur la manière de changer mon balisage/styles, mais je voudrais avoir un code propre et sémantique que possible.

Merci!

source d'informationauteur Fillip Peyton

  1. 23

    Cela semble fonctionner:

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

    J'ai donné le label un margin-left de 18px et les cases d'un margin-left de -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;}

    Semble fonctionner dans la Crome & IE9.

  2. 3

    Une option serait quelque chose comme cela.

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

    Démo ici: http://jsbin.com/opoqon/1/edit

    La façon dont j'ai tendance à faire, c'est différent, ce qui n'est pas d'emballage inputs avec labelsau lieu de faire quelque chose comme 

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

    qui permet alors de faciliter le style.

    Voici un exemple de cette façon: http://jsbin.com/otezut/1/edit

    Mais de toute façon serait de travailler.

  3. 2

    J'aime cette ...

    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;
}
  4. 0

    Ceci est une autre option. C'est très simple mais efficace.
    Vous prenez la partie de l'emballage. <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational <span class="antiWrap">trips</span></label> et vous ajouter un span avec une classe. J'ai appelé la classe antiWrap. Ensuite, vous utilisez css pour ajouter une marge à gauche pour comme. .antiWrap { margin-left: 18px; } Voici myfiddle base à l'aide de votre code. http://jsfiddle.net/alexhram/7WmGr/3/ Je pense que c'est ce que vous allez? Laissez-moi savoir.