Comment puis-je aligner les boutons radio et les étiquettes sur une seule ligne ?

Alignement des étiquettes et des boutons radio sur une seule ligne

Lors de la construction de formulaires, il est crucial de maintenir une disposition cohérente pour les éléments du formulaire. Cependant, aligner côte à côte les boutons radio et leurs étiquettes correspondantes peut poser des problèmes. Nous expliquons ici pourquoi ce problème se produit et proposons une solution pour le résoudre.

Dans le code HTML fourni, les étiquettes et les boutons radio ne s'alignent pas correctement car la propriété d'affichage par défaut de ces éléments est définie sur le niveau de blocage. , les obligeant à s'empiler verticalement.

Pour résoudre ce problème, nous pouvons exploiter la propriété float. En définissant les étiquettes et les boutons radio pour qu'ils flottent vers la gauche, nous pouvons les forcer à apparaître les uns à côté des autres :

fieldset {
  overflow: hidden;
}

.some-class {
  float: left;
  clear: none;
}

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;
}

De plus, nous pouvons utiliser un div conteneur avec la classe "some-class" pour regrouper les boutons radio et étiquettes, comme indiqué dans le code HTML suivant :

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

En mettant en œuvre ces modifications, les étiquettes et les boutons radio s'aligneront horizontalement sur une seule ligne, résolvant ainsi le problème d'alignement.

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!