Obtenir un placement horizontal de l'étiquette et de la saisie du formulaire sur la même ligne

Dans le développement Web, l'esthétique des formulaires est cruciale pour l'expérience utilisateur. La disposition des étiquettes et des champs de saisie sur la même ligne peut améliorer la lisibilité et la convivialité du formulaire. Cet article explique comment aligner un élément d'entrée de manière transparente avec son étiquette, quelle que soit sa longueur.

Tentatives initiales

Une approche courante pour aligner l'étiquette et l'entrée sur un seul line implique de définir la largeur de l’entrée sur auto. Cependant, cela se traduit souvent par une largeur de saisie fixe. Alternativement, en utilisant width : 100 % ; déplace l'entrée vers une nouvelle ligne, créant une mise en page indésirable.

Solution : Utilisation de l'élément Span avec un débordement caché

Cette solution implique d'envelopper l'élément d'entrée dans une étendue, ce qui donne il est suffisamment rembourré pour maintenir sa position sous l'étiquette. Par la suite, l’ajustement de l’étiquette pour qu’elle flotte vers la gauche la déplace vers la gauche de l’étendue. Définir le débordement de la travée sur caché garantit que son contenu s'adapte quelle que soit sa longueur, créant ainsi l'alignement souhaité.

Placement optimal à l'aide de l'affichage : table-cell

Un autre L'approche utilise display: table-cell pour positionner l'étiquette et la saisie sous forme de cellules de tableau. Cela nécessite que le conteneur soit affiché sous forme de tableau et établit la largeur de l'étiquette pour conserver sa position tout en ajustant le remplissage de saisie pour optimiser l'espacement.

Conseils de mise en œuvre

Pour le premier solution, utilisez le code HTML comme ceci :

Label

Et CSS :

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

Pour la deuxième solution :

HTML :

    Label
    

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

En suivant ces solutions, les développeurs peuvent obtenir l'alignement horizontal souhaité des éléments d'étiquette et de saisie, améliorant ainsi la conception des formulaires et l'expérience utilisateur.