Quelle est la meilleure façon d'aligner à gauche les boutons radio les uns sur les autres?

J'ai un tas de boutons radio, et j'aiQuelle est la meilleure façon d'aligner à gauche les boutons radio les uns sur les autres?

<br/>

après chacun d'eux et ils semblent tous centre d'alignement horizontal (même si je mets un peu de CSS qui dit aligner à 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>

Source

2010-12-16 leora

Ooohh, oohh, est-ce en utilisant '

'? :-) – paxdiablo

Un peu plus de HTML donc je peux le mettre dans http://jsfiddle.net/d9Nvk/ – Fred

@Fred: Il semble qu'il y ait un élément parent avec 'text-align: center', donc vous devrez probablement réinitialiser cela. – theazureshadow

Répondre

Vous ne devez pas appliquer ce style aux radios mais au conteneur, ils sont sur, dans ce cas, vous peut 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>

Source

2010-12-16 05:12:10 foX092

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

Essayez d'envelopper chacun dans une label avec classe .radioLeft, supprimer cette classe des entrées, puis ajoutez ce CSS:

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

Par exemple,

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

Source

2010-12-16 05:12:25 theazureshadow

Vous devriez vérifier l'alignement le conteneur qui les entoure.

Source

2010-12-16 05:16:19

Essayez le style CSS suivant.

.radioLeft input{ 
    text-align: left; 
    display:inline; 
}

Source

2010-12-16 10:37:11

+1 pour 'display: inline' - garde les choses (un peu) plus simples. Vous pouvez également utiliser 'inline-block' si les choses se jouent. Bienvenue à SO :-) – Bojangles

Quelle est la meilleure façon d'aligner à gauche les boutons radio les uns sur les autres?

Répondre

Questions connexes