Comment aligner les boutons radio et les étiquettes horizontalement dans les formulaires ?

Boutons radio et étiquettes alignés horizontalement

Lors de la création de formulaires, il peut être frustrant de voir des étiquettes et des boutons radio apparaître sur des lignes différentes. Pour résoudre ce problème et les maintenir alignés horizontalement :

Solution :

Faites flotter les étiquettes et les boutons radio vers la gauche et ajustez le remplissage et les marges si nécessaire. De plus, attribuez un nom de classe aux boutons radio des anciennes versions d’Internet Explorer. Pour obtenir un alignement en ligne identique pour tous les boutons, utilisez la structure HTML suivante :

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

<code class="css">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;
}</code>

En suivant ces instructions, vous pouvez vous assurer que les étiquettes et les boutons radio apparaissent sur la même ligne, offrant ainsi une interface utilisateur transparente. expérience pour remplir des formulaires.

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!