l'habillage de texte incorrect pour bouton radio

J'ai 2 html des boutons radio (séparés par des <br /> tags) où le texte est d'emballage sous le bouton radio à la place de l'alignement avec le retrait à gauche (en raison de la taille du div contenant). L'habillage du texte n'est pas le problème, le problème est qu'il est enveloppant incorrectement sous le bouton radio elle-même, au lieu de s'aligner avec le texte dans la ligne au-dessus d'elle. Je suis en supposant que quelqu'un de style de la balise d'entrée quelque part dans la cascade. Je n'ai pas fait une recherche exhaustive de tous les styles attachés à cette page, mais ne devrais pas le texte juste envelopper correctement, comme une liste à puce?
l'habillage de texte incorrect pour bouton radio

Et si non, comment puis-je corriger cela? Dois-je insérer un <br /> tag où je veux les lignes de rupture afin qu'ils soient correctement alignés?

Merci!

source d'informationauteur Chris22

  1. 19

    Tout d'abord, l'utilisation d'un <br /> est généralement pas recommandé, il est beaucoup mieux de les essayer et d'utiliser le margin propriété CSS pour créer un espace entre les éléments.

    C'est aussi le meilleur dans cette situation d'utiliser des CSS pour faire ce que vous voulez faire. C'est parce que par défaut, ces éléments n'aurez pas ce genre de comportement.

    Dans ce cas, vous voulez quelque chose qui ressemble à ceci:

    <div style="width:300px">
    <input type="radio" class="radioLeft" />
    <div class="textBlock">
        Some text that is too long to fit inline and must be broken 
        up over multiple   lines.Some text that is too long to fit inline 
        and must be broken up over multiple lines.Some text that is too 
        long to fit inline and must be broken up over multiple lines.
    </div>
    <div style="clear:both;"></div> //this is important for repeated inputs
</div>

    Et puis votre CSS devrait ressembler à ceci:

    .radioLeft
{
   float: left;
}

.textBlock
{
    float: left;
    width: 80%; //Adjust this value to fit
}
  2. 5

    Vous pouvez simplement utiliser les CSS pour forcer le texte pour envelopper correctement. Je suis en supposant que vous avez un <span> balise autour du texte, et vous pouvez les utiliser ce qui suit pour ajuster sa position:

    span {
  display: block;
  margin-top: -16px;
  margin-left: 28px;
}

    Espérons que cette aide!
    Tomer

  3. 4

    Réponse pour 2015:

    Car aucune des autres soultions a fonctionné pour moi, voici comment je le fais:

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Radiobutton labels aligned</title>
<style type="text/css">
    div { display:table-row; }
    div span { display:table-cell; vertical-align:middle; } /* You can omit the entire span if you don't want the radiobutton vertically centered */
    div label { display:table-cell; }   
</style>
</head>
<body>
<form>
<div>
    <span><input type="radio" id="a"></span>
    <label for="a">First button's label<br>First button's label</label>
</div>
<div>
    <span><input type="radio" id="b"></span>
    <label for="b">Second button's label</label>
</div>
<input type="radio" id="c"><label for="c">For comparison: Standard-Label</label>
</form>
</body>
</html>

    Voir http://jsfiddle.net/8jzss08p/

    Travaille: Firefox 41, Chrome 45, Internet Explorer 11

  4. 0

    Désolé de la réponse à cette heure si tardive, je viens de tomber sur ce post, voici une autre solution :

    p { margin-left: 20px; text-indent: -20px; }