Comment aligner horizontalement les étiquettes et les champs de saisie dans les formulaires Web ?

Alignement horizontal des étiquettes et des éléments de saisie

L'amélioration de l'esthétique des formulaires Web nécessite la capacité de positionner les étiquettes et les champs de saisie les uns à côté des autres. Ce guide illustre comment réaliser cet alignement horizontal à l'aide de CSS.

Le problème :

Comme souligné dans le message initial, il existe deux défis principaux :

• Assurer que l'étiquette et l'élément d'entrée occupent la même ligne.
• Agrandir la largeur du champ de saisie pour remplir l'espace restant, quelle que soit la longueur de l'étiquette.

Solution 1 : Inline-Block

Utiliser display : inline-block pour les éléments d'étiquette et d'entrée leur permet de s'aligner horizontalement tout en conservant leurs tailles individuelles. Cependant, cela peut ne pas remplir l'exigence de remplir la largeur restante du champ de saisie.

Solution améliorée : float/overflow Magic

• Créer un conteneur pour à la fois l'étiquette et l'élément d'entrée.
• Faites flotter l'étiquette vers la gauche pour permettre à l'entrée d'occuper l'espace restant.
• Masquez le débordement sur le conteneur de l'étiquette pour éviter le comportement à double rangée.
• Définir la largeur : 100 % pour l'élément d'entrée.

**CSS :

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

Solution 2 : table-cell

Une autre approche efficace consiste à traiter les deux éléments comme des cellules de tableau.

• Créez un conteneur wrapper et définissez sa propriété d'affichage sur table.
• Désignez l'étiquette comme display : table-cell avec largeur : 1 px et espace blanc : nowrap pour éviter tout débordement.
• Définissez le champ de saisie comme affichage : cellule de tableau et largeur : 100 %.

**CSS :

.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}

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!