Maison > interface Web > tutoriel CSS > Comment faire en sorte qu'un champ de saisie remplisse l'espace restant dans un conteneur à largeur fixe ?

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

Patricia Arquette
Libérer: 2024-11-15 11:18:03
original
394 Les gens l'ont consulté

How to Make an Input Field Fill Remaining Space in a Fixed-Width Container?

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>
Copier après la connexion
form {
  width: 500px;
  overflow: hidden;
  background-color: yellow;
}

input {
  width: 100%;
}

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

button {
  float: right;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal