Pourquoi « display : block » ne fonctionne-t-il pas comme prévu sur les éléments d'entrée ?

Comprendre les bizarreries des éléments d'entrée avec Display : Block

En CSS, définir la propriété display d'un élément sur block le transforme en un élément de niveau bloc, qui s’étend généralement sur toute la largeur de son conteneur. Cependant, l'application de cette propriété aux éléments d'entrée peut entraîner un comportement inattendu.

Le problème

Lorsque le bloc display: est appliqué à une saisie de texte (), il ne se comporte pas comme un élément typique de niveau bloc. Au lieu de cela, les dimensions de l'entrée restent inchangées, seule l'étiquette de texte apparaissant sur une seule ligne.

Pourquoi cela ne fonctionne-t-il pas comme un Div ?

Cette différence est en raison de la manière unique dont les éléments d’entrée sont rendus. Contrairement aux div, qui sont principalement destinés à la mise en page du contenu, les champs de saisie sont conçus pour l'interaction de l'utilisateur et la saisie de données. En tant que tels, ils ont leur propre ensemble de styles par défaut, qui remplace la propriété display: block.

Obtenir l'effet souhaité

Pour que le champ de saisie remplisse le largeur de son conteneur comme un div, vous devez surmonter le style par défaut. Voici quelques solutions possibles :

• Ajout de la largeur maximale : 100 % :Cette solution de contournement force le champ de saisie à adhérer au modèle de boîte CSS normal, où la largeur inclut le remplissage et borders.
• Utilisation de la propriété box-sizing : CSS3 introduit la propriété box-sizing, qui vous permet de spécifier comment la largeur de l'élément est calculée. Définition de la taille de la boîte : border-box inclut à la fois le remplissage et les bordures dans la largeur de l'élément.

Support multi-navigateurs

Il est important de noter que la boîte La propriété -sizing n'est pas prise en charge par tous les navigateurs, donc des préfixes supplémentaires spécifiques au navigateur (par exemple, -moz-box-sizing pour Firefox) peuvent être ajoutés. nécessaire pour la compatibilité entre navigateurs.

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!