Comment créer des zones de texte à 100 % de largeur sans faire déborder leur conteneur ?

Surmonter les limites des zones de texte de 100 % de largeur

Dans le développement Web, il est courant de rencontrer le dilemme de s'assurer que les zones de texte occupent pleinement leur largeur prévue sans dépasser les limites de son conteneur. Attribuer un style CSS avec « display:block; width: 100% » peut sembler une solution simple, mais cela peut entraîner des problèmes inattendus en raison des marges, des bordures et du remplissage par défaut dans les zones de texte.

Cela peut les zones de texte apparaissent plus larges que la taille réelle du conteneur, comme le montre l'exemple ci-dessous :

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

Obtenir l'effet souhaité

Pour résoudre ce problème et garantir Pour que les zones de texte ne dépassent pas la largeur de leur conteneur, CSS3 introduit la propriété 'box-sizing: border-box'. Cela redéfinit la définition de « largeur » pour englober à la fois le remplissage interne et les bordures externes.

Cependant, en raison du développement continu de CSS3, cette propriété porte actuellement des noms différents selon les navigateurs :

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

Approche alternative pour les navigateurs plus anciens

Si la compatibilité des navigateurs est un problème, une approche alternative consiste à ajouter « padding-right » au fichier

ou élément. Cela compense le remplissage/bordure gauche et droite supplémentaire en pixels que les navigateurs attribuent généralement aux entrées (par exemple, 6 px pour IE

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!