Maison >interface Web >tutoriel CSS >Comment aligner les boutons radio et les étiquettes sur la même ligne en HTML ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-11-04 05:57:29868parcourir

How to Align Radio Buttons and Labels on the Same Line in 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn