Comment empêcher les zones de texte larges de s'étendre au-delà de leurs conteneurs ?

Empêcher les zones de texte larges de trop étendre les conteneurs

Lorsque vous essayez de créer une zone de texte qui s'étend sur toute la largeur d'un conteneur, un problème courant se pose : la largeur réelle de la zone de texte peut s'étendre au-delà des limites du conteneur. En effet, les navigateurs attribuent une marge, une bordure et un remplissage par défaut, ce qui augmente effectivement la largeur globale de la zone de texte.

Considérez l'exemple suivant :

<code class="html"><div id="outer">
  <div id="inner">
    <input type="text" class="wide" />
    <input type="text" class="normal" />
    <div style="clear:both;"></div>
  </div>
</div></code>

<code class="css">#outer {
  border: 1px solid #000;
  width: 320px;
  margin: 0px;
  padding: 0px;
}
#inner {
  margin: 20px;
  padding: 20px;
  background: #999;
  border: 1px solid #000;
}
input.wide {
  display: block;
  margin: 0px;
  width: 100%;
}
input.normal {
  display: block;
  float: right;
}</code>

Dans ce scénario, la zone de texte de classe "large" s'étend au-delà du conteneur, tandis que la zone de texte de classe "normale" s'aligne précisément avec le bord du conteneur. Pour éviter une extension excessive, la propriété "box-sizing" introduite dans CSS3 fournit une solution.

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

En définissant "box-sizing" sur "border-box", la largeur de la zone de texte est définie sur inclure un remplissage externe et des bordures. Cela garantit que la zone de texte occupe toute la largeur de son conteneur sans s'étendre au-delà de ses limites.

Malheureusement, comme "box-sizing" est une propriété CSS3, la compatibilité du navigateur peut varier. Alors que le processus de spécification est en cours, les navigateurs ont adopté différents noms temporaires : "moz-box-sizing" pour Mozilla et "webkit-box-sizing" pour les navigateurs basés sur WebKit.

Une approche alternative pour les anciens Les navigateurs impliquent d'appliquer "padding-right" à l'élément parent (par exemple, un "div" ou "td"). Cela peut aider à prendre en compte l'espace supplémentaire occupé par le remplissage et les bordures par défaut dans l'élément d'entrée. Cependant, la quantité de « padding-right » requise peut varier en fonction du navigateur utilisé.

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!