Empêche l'enrubannage du texte sous les boutons radio

Le mieux que j'ai pu décrire ce que je veux, c'est avec cette image:

Empêche l'enrubannage du texte sous les boutons radio

Comment puis-je faire en sorte que le texte s'aligne avec le texte du haut, et non pas le bouton radio?

Pertinentes CSS est comme suit:

.basic-grey {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    background: #FFF;
    word-wrap: break-word; 
    padding: 20px 30px 20px 30px;
    font: 12px "Myriad Pro", sans-serif;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
    border:1px solid #DADADA;
}

}
.basic-grey h1>span {
    display: block;
    font-size: 11px;
}
.basic-grey label {
    display: block;
    margin: 0px 0px 5px;
}
.basic-grey label>span {
    float: left;
    width: 80px;
    text-align: right;
    padding-right: 10px;
    margin-top: 10px;
    color: #888;
}
.basic-grey select {
    background: #FFF url('down-arrow.png') no-repeat right;
    background: #FFF url('down-arrow.png') no-repeat right);
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    width: 72%;
    height: 30px;
}
.basic-grey textarea{
    height:100px;
}
.basic-grey p {
    display: inline ;
}
;}

Balisage:

<form name="frm1" action="index4.php" method="POST" class="basic-grey">
    <h3>2.  I have taught the course, several times face to face, that I wish to transform into a blended format.  </h3>
    <input type="radio" name="q2" value="1" /> <p>This statement accurately reflects my experience.</p><br>
    <input type="radio" name="q2" value="2" /> <p>This statement partially reflects my experience (I have taught the course only a few times or once before).</p><br>
    <input type="radio" name="q2" value="3" /> <p>This statement does not reflect my experience (this a new course that I will teach for the first time in a blended format).</p><br>
    <br>
    <input type="submit" name="button" class="button" value="Submit" /> 
</form>

Quand j'ai essayer de faire flotter le bouton radio, tous les le texte devient hors de contrôle.

source d'informationauteur Felix Maxime

  1. 22

    C'est assez simple, il suffit de tourner votre label élément de display: block; et l'utilisation margin-left pour la label et float votre bouton radio à gauche

    Démo

    Demo 2 (Rien de compliqué, juste utilisé plusieurs de radio pour la démonstration)

    input[type=radio] {
    float: left;
}

label {
    margin-left: 30px;
    display: block;
}

    Il suffit de noter que dites-le si vous êtes le stockage de la radio avec les étiquettes dans un li élément, quelque chose comme

    <ul class="radiolist">
    <li>
        <input type="radio"><label>Your text goes here</label>
    </li>
</ul>

    Alors assurez-vous de auto les effacer en utilisant quelque chose comme

    .radiolist li:after {
    content: "";
    clear: both;
    display: table;
}

    Qui permettra de s'assurer que vous êtes auto-effacement de tous les li éléments, et sur la :after pseudo, il est bien pris en charge dans IE8 donc rien à craindre.

  2. 1

    J'aime ceci:

    HTML: 

    <input type="radio" name="vacation" value="Ski Trips"><label>very long label ...</label>

    CSS:

    input[type="radio"] { 
    position: absolute;
}
input[type="radio"] ~ label { 
    padding-left:1.4em;
    display:inline-block;
}
  3. 0
    .basic-grey {
    word-wrap: break-word;
    font: 12px "Myriad Pro",sans-serif;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
}
.basic-grey p {
    padding-left:20px;
}
.basic-grey input[type=radio] {
    margin-left:-15px;
}

    En supposant que votre balisage:

    <p><input type="radio"/>This statements actually...</p>