Quel est le meilleur moyen pour aligner à gauche des boutons radio sur le dessus les uns des autres?

J'ai un tas de boutons radio, et j'ai un

<br/>

après chacun d'eux et ils semblent tous d'alignement horizontal du centre (même si j'ai mis un peu de CSS qui dit être aligné à gauche).

Voici le CSS,

.radioLeft
{
    text-align:left;
}

Voici le code HTML:

 <input checked="checked" class="radioLeft"  name="CalendarType" value="1" type="radio"><b>Person </b>(False) <br>
 <input checked="checked" class="radioLeft"  name="CalendarType" value="2" type="radio"><b>Event </b>(False) <br>
 <input checked="checked" class="radioLeft"  name="CalendarType" value="3" type="radio"><b>Release</b>(False) <br>
Oohhh, oohh, est-il par l'utilisation de <table>? 🙂
Un peu plus de HTML afin que je puisse le mettre dans jsfiddle.net/d9Nvk
Il semble qu'il est un parent de l'élément avec text-align: center, de sorte que vous aurez probablement à le réinitialiser.

OriginalL'auteur leora | 2010-12-16

  1. 5

    Vous ne devriez pas appliquer ce style aux radios, mais le contenant, ils sont, dans ce cas, vous pouvez ajouter un div:

    <div class="radioLeft">
  <input checked="checked" name="CalendarType" value="1" type="radio"><b>Person </b>(False) <br>
   <input checked="checked" name="CalendarType" value="2" type="radio"><b>Event </b>(False) <br>
   <input checked="checked"  name="CalendarType" value="3" type="radio"><b>Release</b>(False) <br>
</div>

    OriginalL'auteur foX092

  2. 2

    Essayer avec le style CSS suivante.

    .radioLeft input{
    text-align: left;
    display:inline;
}
    +1 pour display: inline - garde les choses (un peu) plus simple. Vous pouvez également utiliser inline-block si les choses jouer. Bienvenue 🙂

    OriginalL'auteur Vijender Reddy

  3. 0

    Vous devriez vérifier l'alignement du récipient qui les entoure.

    OriginalL'auteur Ivan Ivanić

  4. 0

    Vous essayez d'ajouter une propriété CSS qui s'applique uniquement aux éléments de niveau bloc (comme div) à un élément inline (input). Cela ne marchera pas, vous devez créer un bloc élément de niveau (j'ai choisi d'utiliser label et de le faire au niveau du bloc à l'aide de CSS, mais c'est juste pour la sémantique) et de l'utiliser pour contenir chaque étiquette.

    Essayer de l'encadrer dans un label avec classe .radioLeft, supprimer cette classe à partir de ces entrées, puis ajouter ce CSS:

    .radioLeft {
  display: block;
  text-align: left;
}

    Par exemple,

    <label class="radioLeft"><input type="radio"><b>Person</b>(False)</label>

    OriginalL'auteur theazureshadow