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

L'élément d'entrée ne s'étend pas pour bloquer la largeur du conteneur avec 'Display:block'

Malgré l'attribution de 'display:block' à un élément d'entrée, il ne peut pas se comporter comme un div et remplir la largeur du conteneur. Cet écart découle du comportement inhérent des éléments d'entrée en CSS.

En CSS, 'display:block' permet généralement à un élément de s'étendre et d'occuper toute la largeur disponible. Cependant, les éléments d'entrée sont conçus pour avoir « display:inline » comme mode d'affichage par défaut. Cela signifie qu'ils n'occuperont que la largeur de leur contenu, qui inclut le remplissage et les bordures.

Pour résoudre ce problème et forcer l'élément d'entrée à remplir la largeur, vous pouvez utiliser 'width:100%'. Cependant, cette approche peut être problématique si l'entrée a un remplissage et une bordure non nuls, car cela entraînera une largeur finale supérieure à 100 %.

Solution multi-navigateurs utilisant le dimensionnement de la boîte CSS3 '

Une solution complète consiste à utiliser la propriété 'box-sizing:border-box' relativement inconnue de CSS3. Cette propriété garantit que la largeur de l'élément d'entrée (ou de tout autre élément) inclut son remplissage et sa bordure.

Voici une version modifiée du code CSS fourni :

form { display: block; margin: 0; padding: 0; width: 50%; border: 1px solid green; overflow: visible }
div, input { display: block; border: 1px solid red; padding: 5px; width: 100%; font: normal 12px Arial; }

.bb {
    box-sizing: border-box; /* CSS 3 rec */
    -moz-box-sizing: border-box; /* Firefox 2 */
    -ms-box-sizing: border-box; /* Internet Explorer 8 */
    -webkit-box-sizing: border-box; /* Safari 3 */
    -khtml-box-sizing: border-box; /* Konqueror */
}

En ajoutant le '.bb' à l'élément d'entrée, vous pouvez activer 'box-sizing:border-box' pour une compatibilité entre navigateurs. Cela garantit que l'élément d'entrée occupera toujours toute la largeur disponible, quels que soient son remplissage et ses bordures.

Notes supplémentaires :

1. Internet Explorer 6 et 7 ne prend pas en charge le « box-sizing » CSS3, mais il peut être activé à l'aide d'un script de comportement.
2. Le La propriété 'box-sizing:border-box' est prise en charge dans la plupart des navigateurs modernes, notamment Google Chrome, Firefox, Safari et Opera.

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!