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

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!