Comment remplir la largeur restante d'un conteneur avec un élément d'entrée ?

Remplir la largeur restante du conteneur avec un élément d'entrée

Lorsque les étiquettes de saisie et les champs de texte partagent une seule ligne dans un conteneur de largeur fixe, le style le champ de saisie pour remplir de manière optimale la largeur restante peut être un défi. Voici une solution polyvalente sans recourir à du JavaScript peu fiable ou à des astuces de mise en page de tableau :

Solution :

1. Enveloppez le champ de saisie : Joignez le champ de saisie dans un span avec display: block.
2. Inverser le positionnement : Placez l'élément bouton avant le champ de saisie.
3. Flottez le bouton : Ajoutez float : à droite de l'élément bouton.
4. Remplissez l'espace restant : Le champ de saisie, enveloppé dans le span, occupera automatiquement l'espace restant.

Exemple :

form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}

<form method="post">
    <button>Search</button>
    <span><input type="text" title="Search" /></span>
</form>

Cette approche garantit que le champ de saisie remplit la largeur restante du conteneur même sans connaître la taille de l'étiquette. C'est simple, propre et compatible avec différents navigateurs.

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!