Maison  >  Article  >  interface Web  >  Les zones de texte d’une largeur de 100 % peuvent-elles être contenues dans leurs conteneurs ?

Les zones de texte d’une largeur de 100 % peuvent-elles être contenues dans leurs conteneurs ?

Barbara Streisand
Barbara Streisandoriginal
2024-10-31 14:25:01289parcourir

Can 100% Width Text Boxes Be Contained Within Their Containers?

Contrôle de la largeur des zones de texte dans les conteneurs

Dans le développement Web, il est souvent souhaitable que les zones de texte remplissent la largeur de leurs conteneurs. Cependant, la marge, la bordure et le remplissage ajoutés par le navigateur peuvent entraîner l'extension des zones de texte d'une largeur de 100 % au-delà des limites du conteneur.

Les zones de texte d'une largeur de 100 % peuvent-elles être contenues ?

Oui, en utilisant la propriété CSS3 box-sizing : border-box, vous pouvez redéfinir la « largeur » pour tenir compte du remplissage externe et de la bordure.

Implémentation CSS

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Cette solution fonctionne en incluant l'espace supplémentaire occupé par le remplissage et la bordure dans le calcul de la largeur de la zone de texte.

Remplacement pour les navigateurs non CSS3

Pour les navigateurs plus anciens, une alternative consiste à ajouter une quantité spécifique de remplissage droit au conteneur englobant :

#container {
    padding-right: 6px;
}

La quantité de remplissage est généralement de 6 px pour les versions d'IE antérieures à 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!

Déclaration:
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