Comment afficher les boutons radio et les étiquettes sur la même ligne ?

Affichage sur la même ligne des boutons radio et des étiquettes

Lors de la création d'un formulaire, il peut être souhaitable d'avoir des boutons radio et leurs étiquettes correspondantes affiché sur la même ligne. Cependant, par défaut, les boutons radio s'affichent sous leurs étiquettes.

Le problème suivant a été rencontré lors de la tentative d'alignement des boutons radio et des étiquettes :

<form>
    <label>First Item</label>
    <input type="radio">
    
    <label>Second Item</label>
    <input type="radio">
    
    <input type="submit">
</form>

Dans ce cas, les radios sont affichées sous les étiquettes. Pour résoudre ce problème, la solution suivante a été implémentée :

Faites flotter les étiquettes et les éléments d'entrée vers la gauche et ajustez le remplissage et la marge jusqu'à ce que l'alignement soit obtenu.

De plus, pour une compatibilité optimale, ajoutez une classe nom des boutons radio pour les anciennes versions d'Internet Explorer.

Pour un formulaire avec plusieurs boutons radio sur la même ligne, le balisage recommandé est :

<fieldset>
    <div class="some-class">
        <input type="radio" class="radio" name="..." value="...">
        <label for="...">...</label>
    </div>
</fieldset>

Avec le CSS suivant :

fieldset {
    overflow: hidden;
}

.some-class {
    float: left;
}

label {
    float: left;
    display: block;
    padding: 0 1em 0 8px;
}

input[type=radio] {
    float: left;
    margin: 2px 0 0 2px;
}

En mettant en œuvre ces techniques, il est possible d'obtenir un affichage sur la même ligne des boutons radio et des étiquettes.

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!