Comment aligner les boutons radio et les étiquettes sur la même ligne en HTML ?

Positionnement des boutons radio et des étiquettes associées sur la même ligne

Dans les formulaires HTML, l'alignement des boutons radio et de leurs étiquettes associées sur une seule ligne peut être stimulant. Pour y parvenir, plusieurs techniques CSS peuvent être utilisées.

La structure HTML suggérée positionne les éléments label et input :

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

Pour les aligner horizontalement, ajoutez les règles CSS suivantes :

<code class="css">label {
  float: left;
  clear: none;
  display: block;
  padding: 0px 1em 0px 8px;
}

input[type=radio],
input.radio {
  float: left;
  clear: none;
  margin: 2px 0 0 2px;
}</code>

Cela positionne l'étiquette et le bouton radio l'un à côté de l'autre. Pour vous assurer que plusieurs boutons radio sont alignés sur la même ligne, utilisez le balisage suivant :

<code class="html"><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></code>

Avec les règles CSS appropriées, les boutons radio et les étiquettes seront alignés sur la même ligne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!