Comment créer des zones de texte à 100 % de largeur sans faire déborder leur conteneur ?-tutoriel CSS-php.cn

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

Patricia Arquette

Libérer： 2024-11-04 09:14:02

original

781 Les gens l'ont consulté

How to Make Text Boxes 100% Width Without Overflowing Their Container?

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>

Copier après la connexion

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>

Copier après la connexion

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<8).

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!