Comment faire en sorte qu'un champ de saisie remplisse l'espace restant dans un conteneur à largeur fixe ?

Atteindre une largeur fluide pour les éléments d'entrée dans des conteneurs à largeur fixe

Question :

Comment Un champ de saisie peut-il être conçu pour occuper l'espace restant disponible dans son conteneur de largeur fixe, sans retour à la ligne du texte ni besoin de déterminer la taille de l'étiquette au préalable ?

Réponse :

Pour obtenir cet effet, considérez ce qui suit :

1. Wrapper Span : Enveloppez le champ de saisie dans un élément span défini pour afficher : block.
2. Ordre positionnel : Placez le "bouton" (ou d'autres éléments) avant le champ de saisie.
3. Flottant : Faites flotter le "bouton" (ou d'autres éléments) vers la droite pour permettre au champ de saisie de remplir l'espace restant.

Exemple de code :

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

form {
  width: 500px;
  overflow: hidden;
  background-color: yellow;
}

input {
  width: 100%;
}

span {
  display: block;
  overflow: hidden;
  padding-right: 10px;
}

button {
  float: right;
}

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!