Comment faire en sorte qu'une zone de texte s'étende sur 100 % de son conteneur sans débordement ?

Contrôle de l'expansion de la zone de texte à 100 % de la largeur

Il est courant de souhaiter une zone de texte qui s'étend sur toute la largeur de son conteneur. Pour y parvenir, on peut appliquer un style comme :

<code class="css">input.wide {
  display: block;
  width: 100%;
}</code>

Cependant, cette approche se heurte à un défi : la largeur de la zone de texte est définie par son contenu. Les marges, bordures et remplissage par défaut de la zone de texte la font s'étendre au-delà des limites du conteneur, créant ainsi un espace disgracieux.

Pour résoudre ce problème, nous avons besoin d'un moyen pour que la zone de texte remplisse toute la largeur de son contenu. récipient sans le dépasser. Une solution consiste à utiliser la propriété CSS3 box-sizing : border-box. Cette propriété redéfinit la signification de la largeur pour inclure le remplissage externe et la bordure.

Malheureusement, la prise en charge du dimensionnement des boîtes n'est pas encore universelle. Ainsi, nous pouvons inclure des valeurs de secours spécifiques au navigateur :

<code class="css">input.wide {
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}</code>

Au lieu d'utiliser le dimensionnement de la boîte, on peut appliquer manuellement padding-right à l'élément englobant, en s'assurant qu'il est égal au remplissage attendu. et bordure.

Les deux approches permettent de contrôler la largeur d'une zone de texte tout en l'empêchant de déborder au-delà des limites de son conteneur.

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!