Comment aligner l'élément d'entrée avec l'étiquette sur la même ligne ?

Alignement de l'élément d'entrée avec l'étiquette sur la même ligne

Dans la conception Web, il est souvent souhaitable de positionner une étiquette et son champ de saisie correspondant sur la même ligne, avec le champ de saisie s'agrandissant pour remplir la largeur restante de son conteneur. Cependant, cela pose un défi car les propriétés CSS telles que « width: 100%; » provoque généralement le retour de l'entrée sur une nouvelle ligne.

Pour surmonter ce problème, il existe deux approches :

Approche 1 : Débordement caché et flottant

Cette approche consiste à faire flotter l'étiquette vers la gauche et à définir l'entrée pour avoir un débordement de caché et un span pour l'envelopper. La durée a un remplissage nul sur le côté gauche et 6 pixels sur la droite pour tenir compte de la largeur de l'étiquette.

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

<code class="css">label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}</code>

Approche 2 : Afficher la cellule de table

Une autre option consiste à utiliser la propriété "display: table-cell". Le conteneur est défini sur « display: table », ce qui crée une disposition semblable à un tableau, tandis que l'étiquette et l'entrée sont placées à l'intérieur des cellules du tableau. L'étiquette a une largeur de 1 px pour éviter tout retour à la ligne, et l'entrée est définie pour avoir un remplissage gauche de 5 px pour l'espacement.

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

<code class="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%
}</code>

Les deux méthodes permettent d'obtenir efficacement l'alignement souhaité avec plusieurs navigateurs. compatibilité. Les développeurs peuvent choisir l'approche qui correspond le mieux à leurs besoins spécifiques et aux exigences du projet.

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!