Pourquoi n'affiche-t-il pas : block ; width: auto;` Faire en sorte qu'un champ de saisie remplisse son conteneur ?

Débloquer le comportement de l'élément avec Display:block et width:auto

Le problème survient lors de la spécification de display:block et width:auto sur une entrée field, ce qui diffère des attentes selon lesquelles il se comporterait comme un div et s'étendrait pour remplir la largeur du conteneur. Malgré l'hypothèse selon laquelle un div est un élément de bloc avec une largeur automatique, ce n'est pas le cas pour les champs de saisie.

Comprendre le problème

Champs de saisie héritant du modèle de boîte du standard HTML, où la largeur de l'élément englobe uniquement le contenu réel et non le remplissage ou les bordures. Par conséquent, la définition de width:auto sur un champ de saisie n'inclut pas automatiquement le remplissage et les bordures.

Obtenir une entrée pleine largeur

Pour garantir que le champ de saisie remplit le conteneur largeur, diverses approches peuvent être envisagées :

1. Box Sizing

CSS3 introduit la propriété box-sizing, qui permet de contrôler le comportement du modèle de boîte. Définition de la taille de la boîte : la bordure-boîte sur le champ de saisie définit la largeur comme incluant à la fois le contenu ainsi que tout remplissage et bordures.

2. Solution multi-navigateurs

Une solution multi-navigateurs implique l'utilisation de CSS3 avec des préfixes spécifiques au navigateur et une instruction conditionnelle pour Internet Explorer 6-7. Cela garantit la compatibilité entre les différents navigateurs.

3. Solutions de contournement du wrapper

Les solutions alternatives impliquent l'utilisation d'éléments wrapper ou l'attribution de largeurs spécifiques qui tiennent compte du remplissage et des bordures. Cependant, ces solutions de contournement ont des limites avec les relations sémantiques des sélecteurs HTML et CSS.

Conclusion

Le comportement de display:block et width:auto sur les champs de saisie diffère des attentes en raison au caractère unique du modèle de boîte de l'élément d'entrée. Comprendre cette distinction et explorer des solutions alternatives, telles que le dimensionnement des boîtes ou la compatibilité entre navigateurs, permet aux développeurs d'atteindre les exigences de largeur souhaitées pour leurs champs de saisie.

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!