web-dev-qa-db-fra.com

Comment puis-je aligner des éléments radio d'entrée horizontalement?

Je souhaite que ces entrées radio s'étendent sur l'écran plutôt que l'une sous l'autre:

HTML

<input type="radio" name="editList" value="always">Always
<br>
<input type="radio" name="editList" value="never">Never
<br>
<input type="radio" name="editList" value="costChange">Cost Change

CSS

input[type="radio"] {
    margin-left:10px;
}

http://jsfiddle.net/clayshannon/8wRT3/13/

Je me suis promené avec les propriétés d’affichage, et cherché sur Google, et bang (bang? Binged?) Pour obtenir une réponse, mais je n’en ai pas trouvé.

htmlcssinputradio-button
12
B. Clay Shannon

Dans votre cas, il vous suffit de supprimer les sauts de ligne (balises <br>) entre les éléments - les éléments input sont inline-block par défaut (dans Chrome au moins). (exemple mis à jour) .

<input type="radio" name="editList" value="always">Always
<input type="radio" name="editList" value="never">Never
<input type="radio" name="editList" value="costChange">Cost Change

Je suggérerais cependant d'utiliser des éléments <label>. Ce faisant, cliquer sur l'étiquette vérifiera également l'élément. Soit vous associez l'attribut for de <label> avec celui de id: <input>: (exemple)

<input type="radio" name="editList" id="always" value="always"/>
<label for="always">Always</label>

<input type="radio" name="editList" id="never" value="never"/>
<label for="never">Never</label>

<input type="radio" name="editList" id="change" value="costChange"/>
<label for="change">Cost Change</label>

..ou enroulez directement les éléments <label> autour des éléments <input>: (exemple)

<label>
    <input type="radio" name="editList" value="always"/>Always
</label>
<label>
    <input type="radio" name="editList" value="never"/>Never
</label>
<label>
    <input type="radio" name="editList" value="costChange"/>Cost Change
</label>

Vous pouvez également obtenir de la fantaisie et utiliser le pseudo-classe :checked .

27
Josh Crozier

Pour que votre bouton radio apparaisse horizontalement, ajoutez simplement

RepeatDirection = "Horizontal" 

dans votre fichier .aspx où asp: radiobuttonlist est déclaré.

1
Arjun

Cela fonctionne aussi comme un charme

<form>
    <label class="radio-inline">
      <input type="radio" name="optradio" checked>Option 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 2
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 3
    </label>
  </form>

1
John

Ici est mis à jour Fiddle

Il suffit de supprimer </br> entre la radio d'entrée

<div class="clearBoth"></div>
<input type="radio" name="editList" value="always">Always
<input type="radio" name="editList" value="never">Never
<input type="radio" name="editList" value="costChange">Cost Change
<div class="clearBoth"></div>
1
Naveen Kumar Alonekar