Comment aligner les étiquettes de formulaire et les entrées horizontalement sur la même ligne ?

Obtenir un placement horizontal de l'étiquette du formulaire et de la saisie 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 : utiliser l'élément Span avec un débordement caché

Cette solution consiste à envelopper l'élément d'entrée dans une étendue, en donnant 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 maintenir sa position tout en ajustant le remplissage de saisie pour optimiser l'espacement.

Conseils de mise en œuvre

Pour le premier solution, utilisez du code HTML comme celui-ci :

<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>

Et CSS :

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

Pour la deuxième solution :

HTML :

<div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text" /></span>
</div>

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 du formulaire et l'expérience utilisateur.

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!