2010-12-16 7 views
4

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> 
+2

Ooohh, oohh, est-ce en utilisant '

'? :-) – paxdiablo

+0

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

+1

@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

5

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> 
0

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> 
0

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

2

Essayez le style CSS suivant.

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

+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

Questions connexes