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

1. HTML : Utilisez un élément label et span pour envelopper le input :

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

2. CSS : Utiliser le débordement : propriété cachée sur le span :

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

Affichage des cellules du tableau Technique

1. HTML : Placez l'étiquette et l'entrée dans un conteneur div :

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

2. CSS : Utiliser l'affichage du tableau et la cellule du tableau propriétés :

<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 d'entrée 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!