Comment faire en sorte qu'un élément d'entrée remplisse la largeur restante de son conteneur ?

Comment styliser un élément d'entrée pour l'adapter à la largeur restante de son conteneur

Vous pouvez souvent rencontrer des situations dans lesquelles vous avez un élément d'entrée à côté d'une étiquette dans un format fixe. conteneur de largeur. L'objectif est que le champ de saisie ajuste dynamiquement sa largeur pour remplir l'espace restant sans provoquer de sauts de ligne.

Solution CSS

<br>form {</p>
<pre class="brush:php;toolbar:false">width: 500px;
overflow: hidden;
background-color: yellow;

}
entrée {

width: 100%;

}
span {

display: block;
overflow: hidden;
padding-right:10px;

}
bouton {

float: right;

}

<br><form method="post"></p>
<pre class="brush:php;toolbar:false"> <button>Search</button>
 <span><input type="text" title="Search" /></span>

< ;/pre>

Cette solution utilise plusieurs techniques clés :

• L'élément d'entrée est enveloppé dans un span avec un display: block, en le définissant pour qu'il se comporte comme un élément de niveau bloc.
• Le span a également une propriété overflow: Hidden pour empêcher tout débordement d'entrée excessif d'être visible.
• Le bouton flotte vers la droite, le faisant se positionner à l'extrême droite du conteneur.
• La largeur de l'élément d'entrée est définie sur 100 %, remplissant efficacement la largeur restante du formulaire.

Cette approche fournit un moyen simple et efficace de dimensionner dynamiquement un élément d'entrée pour l'adapter à la largeur restante, quelle que soit la longueur 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!