Pourquoi les boutons \'display: block\' et 'width: auto\' n'étirent-ils pas pour remplir le conteneur dans Chrome ?

Pourquoi « affichage : bloc » et « largeur : auto » n'étirent pas les boutons pour remplir le conteneur

Lors de l'application de « affichage : block" et "width: auto" sur un bouton, vous pouvez vous attendre à ce qu'il s'étire et remplisse le conteneur comme les autres éléments de bloc. Cependant, ce comportement ne se produit pas dans les versions récentes de Chrome.

Comprendre le comportement

La raison de ce comportement réside dans la classification des boutons comme « éléments remplacés ». " Les éléments remplacés, qui incluent les éléments input, select, button, img, object et textarea, ont des propriétés d'affichage par défaut spécifiques.

Selon les spécifications CSS, les éléments remplacés peuvent avoir des dimensions intrinsèques déterminées par des ressources externes, telles que des images. ou les contrôles du navigateur. Par exemple, si un élément d'image a une largeur définie sur « auto », il utilisera la largeur réelle du fichier image lié.

De plus, les éléments remplacés peuvent avoir des exigences de formatage visuel imposées par l'élément lui-même, telles que comme l'apparence des contrôles de l'interface utilisateur pour les éléments de formulaire, qui échappent au contrôle de CSS.

Comment cela affecte les boutons

Bien que les boutons ne soient pas considérés comme de purs éléments remplacés, car définis par le W3C, ils se comportent de la même manière dans ce contexte. Par défaut, ils ont des dimensions intrinsèques basées sur leur contenu, et "display: block" ne remplace pas ce comportement.

Solution pour étirer les boutons

Si vous le souhaitez étirer les boutons pour remplir le conteneur, vous pouvez utiliser une approche alternative :

<code class="css">button {
  display: flex;
  width: 100%;
}</code>

Flexbox offre plus de contrôle sur la taille des éléments et permet d'étirer les éléments pour remplir l'espace disponible.

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!