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

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

Barbara Streisand
Barbara Streisandoriginal
2024-11-04 03:06:29497parcourir

How to Display Radio Buttons and Labels on the Same Line?

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!

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