Warum sorgt „display: block' nicht dafür, dass mein Eingabeelement die Breite seines Containers ausfüllt?

Eingabeelement wird mit „Display:block“ nicht auf Blockcontainerbreite erweitert

Obwohl „display:block“ einem Eingabeelement zugewiesen wurde, Es verhält sich möglicherweise nicht wie ein Div und füllt die Containerbreite aus. Diese Abweichung ist auf das inhärente Verhalten von Eingabeelementen in CSS zurückzuführen.

In CSS ermöglicht „display:block“ normalerweise, dass ein Element erweitert wird und die volle verfügbare Breite einnimmt. Allerdings sind Eingabeelemente so konzipiert, dass sie „display:inline“ als Standardanzeigemodus haben. Das bedeutet, dass sie nur die Breite ihres Inhalts einnehmen, einschließlich aller Abstände und Ränder.

Um dieses Problem zu beheben und zu erzwingen, dass das Eingabeelement die Breite ausfüllt, kann man „width:100 %“ verwenden. Dieser Ansatz kann jedoch problematisch sein, wenn die Eingabe einen Abstand und einen Rand ungleich Null aufweist, da dies zu einer endgültigen Breite von mehr als 100 % führt.

Browserübergreifende Lösung mit CSS3-Boxgröße '

Eine umfassende Lösung besteht in der Verwendung der relativ unbekannten Eigenschaft „box-sizing:border-box“ aus CSS3. Diese Eigenschaft stellt sicher, dass die Breite des Eingabeelements (oder eines anderen Elements) dessen Abstand und Rand einschließt.

Hier ist eine modifizierte Version des bereitgestellten CSS-Codes:

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 */
}

Durch Hinzufügen von Wenn Sie die Klasse „.bb“ zum Eingabeelement hinzufügen, können Sie „box-sizing:border-box“ für browserübergreifende Kompatibilität aktivieren. Dadurch wird sichergestellt, dass das Eingabeelement immer die volle verfügbare Breite einnimmt, unabhängig von seiner Auffüllung und seinen Rändern.

Zusätzliche Hinweise:

1. Internet Explorer 6 und 7 unterstützen CSS3 „Box-Sizing“ nicht, können aber mithilfe eines Verhaltensskripts aktiviert werden.
2. Das „Box-Sizing:Border-Box“ Die Eigenschaft wird in den meisten modernen Browsern unterstützt, einschließlich Google Chrome, Firefox, Safari und Opera.

Das obige ist der detaillierte Inhalt vonWarum sorgt „display: block' nicht dafür, dass mein Eingabeelement die Breite seines Containers ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!