Pourquoi « display: block » ne fait-il pas qu'un élément d'entrée remplisse la largeur de son conteneur ?

Entrée avec Display : le bloc ne se comporte pas comme un bloc

En CSS, définir display: block sur un élément le désigne comme un bloc- élément de niveau, qui doit remplir l’espace horizontal disponible. Cependant, lorsque cela est appliqué à un élément d'entrée, il ne se comporte pas comme un élément de bloc normal, tel qu'un div. Cela est dû à une bizarrerie dans la façon dont les éléments d'entrée sont rendus.

Largeur : l'auto n'agit pas comme prévu

Le réglage de la largeur : l'auto sur l'élément d'entrée ne force pas pour remplir la largeur du conteneur comme il le ferait pour un élément div. En effet, les éléments d'entrée ont des dimensions et un remplissage intrinsèques par défaut, qui remplacent la propriété width.

Réalisation de l'expansion de la largeur d'entrée

Pour que l'entrée remplisse la largeur disponible, les options suivantes peuvent être utilisées :

• Largeur fixe : Ce n'est pas une solution idéale car il ne tient pas compte des variations de contenu dans l'entrée.
• Solutions de contournement du wrapper : L'utilisation d'un élément wrapper autour de l'entrée peut fournir une solution de contournement, mais cela ajoute un balisage HTML inutile.
• Box-Sizing : Border-Box : CSS3 a introduit la propriété box-sizing, qui permet aux éléments d'inclure leur remplissage et leur bordure dans le calcul de leur largeur lorsqu'ils sont définis sur border-box.

.input-width-full {
  box-sizing: border-box;
  width: 100%;
}

Prise en charge des navigateurs hérités

Pour les navigateurs qui ne prennent pas en charge le dimensionnement de boîte CSS3, un comportement Le fichier (.htc) peut être utilisé pour simuler le modèle de bordure. Cela nécessite l'utilisation de commentaires conditionnels pour cibler Internet Explorer 6 et 7.

En utilisant ces techniques, il est possible de créer des entrées qui s'étendent dynamiquement pour remplir la largeur de leur conteneur, même avec un remplissage et des bordures arbitraires, assurant une mise en page CSS plus flexible et cohérente.

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!