Boutons radio et étiquette à afficher sur la même ligne

Question

Pourquoi mes étiquettes et mes boutons radio ne restent-ils pas dans la même ligne, que puis-je faire?

Voici mon formulaire:

 <form name="submit" id="submit" action="#" method="post">
            <?php echo form_hidden('what', 'item-'.$identifier);?>

            <label for="one">First Item</label>
            <input type="radio" id="one" name="first_item" value="1" />

            <label for="two">Second Item</label>
            <input type="radio" id="two" name="first_item" value="2" />             <input class="submit_form" name="submit" type="submit" value="Choose" tabindex="4" />
            </form>
 

Answer 1

Si vous utilisez la structure HTML que je poser cette question, vous pouvez tout simplement flotter votre étiquette et l'entrée à gauche et ajuster padding/margin jusqu'à ce que les choses sont alignés.

Et oui, vous aurez envie de faire votre bouton radio ont un nom de classe pour les vieux IE. Et pour avoir tout sur la même ligne, selon le balisage j'ai lié ci-dessus, il serait de la sorte:

<fieldset>
  <div class="some-class">
    <input type="radio" class="radio" name="x" value="y" id="y" />
    <label for="y">Thing 1</label>
    <input type="radio" class="radio" name="x" value="z" id="z" />
    <label for="z">Thing 2</label>
  </div>
</fieldset>

signifie que votre démarreur CSS serait quelque chose comme:

fieldset { overflow:hidden }
.some-class { float:left; clear:none; }
label { float:left; clear:none; display:block; padding: 2px 1em 0 0; }
input[type=radio], input.radio { float:left; clear:none; margin: 2px 0 0 2px; }

Answer 2

Ce que j'ai toujours fait, c'est juste envelopper le bouton radio à l'intérieur de l'étiquette ...

 <label for="one">
<input type="radio" id="one" name="first_item" value="1" />
First Item
</label>
 

Quelque chose comme ça a toujours fonctionné pour moi.

Answer 3

vous pourriez avoir une largeur spécifiée pour vos balises d’ entrée quelque part dans votre css .

Ajouter un class="radio" à vos boîtes de radio et un input.radio {width: auto;} à votre css.

Answer 4

Mettez les deux à display:inline .

Answer 5

Hmm. Par défaut, <label> est display: inline; et <input> est (approximativement, au moins) display: inline-block; , ils doivent donc être tous deux sur la même ligne. . Voir http://jsfiddle.net/BJU4f/

Peut-être qu'une feuille de style définit label ou input display: block ?