Maison >interface Web >tutoriel CSS >Comment aligner les étiquettes et les entrées horizontalement avec une largeur dynamique en CSS ?
Aligner l'étiquette et l'entrée horizontalement avec une largeur dynamique
Dans la conception Web, il est souvent nécessaire de positionner les étiquettes et leurs éléments d'entrée correspondants sur le même doubler. Cependant, s'assurer que l'élément d'entrée remplit la largeur restante quel que soit le texte de l'étiquette peut s'avérer difficile.
Pour y parvenir en utilisant CSS, envisagez les techniques suivantes :
Technique de masquage de débordement
<code class="html"><label for="test">Label</label> <span><input name="test" id="test" type="text" /></span></code>
<code class="css">label { float: left; /* Align label to the left */ } span { display: block; overflow: hidden; /* Key trick for adjusting input width */ padding: 0 4px 0 6px; /* Add padding for visual consistency */ } input { width: 100%; }</code>
Technique d'affichage des cellules de tableau
<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; /* Minimal width to accommodate label */ white-space: nowrap; } span { display: table-cell; padding: 0 0 0 5px; } input { width: 100%; }</code>
Ces techniques alignent efficacement l'étiquette et la saisie horizontalement tout en garantissant que l'élément de saisie remplit la largeur restante, en s'adaptant à la longueur du texte de l'étiquette.
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!