Comment aligner les éléments d'entrée et les étiquettes sur la même ligne en HTML ?

Alignement des éléments d'entrée avec des étiquettes sur la même ligne

En HTML, il est souvent souhaitable de placer une étiquette et un élément d'entrée sur la même ligne horizontale. Cependant, déterminer la largeur idéale pour que l'élément d'entrée remplisse l'espace restant peut être difficile.

Problème :

L'approche standard, utilisant width: auto;, résultats dans une largeur statique pour l’élément d’entrée. Alternativement, largeur : 100 % ; déplace l'entrée vers une nouvelle ligne.

Solution :

Pour obtenir l'alignement souhaité, envisagez les techniques CSS suivantes :

Option 1 : Flottant Étiquette et débordement

HTML :

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

CSS :

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

Cette méthode utilise le débordement : caché propriété pour aligner l'élément d'entrée avec l'étiquette en empêchant les sauts de ligne.

Option 2 : Affichage du tableau

HTML :

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

CSS :

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

Cette approche utilise la propriété display: table pour créer une disposition de type tableau, où l'étiquette a une largeur fixe et l'élément d'entrée se développe pour remplir l'espace restant.

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!