Warum sorgt „display: block' nicht dafür, dass ein Eingabeelement seine Containerbreite ausfüllt?

Eingabe mit Display: Block verhält sich nicht wie ein Block

In CSS kennzeichnet die Einstellung display: block für ein Element dieses als Block. Ebenenelement, das den verfügbaren horizontalen Raum ausfüllen sollte. Wenn dies jedoch auf ein Eingabeelement angewendet wird, verhält es sich nicht wie ein normales Blockelement, beispielsweise ein div. Dies liegt an einer Besonderheit in der Art und Weise, wie Eingabeelemente gerendert werden.

Breite: Auto verhält sich nicht wie erwartet

Das Festlegen von „width: auto“ für das Eingabeelement erzwingt keine Erzwingung Es füllt die Containerbreite wie ein div-Element aus. Dies liegt daran, dass Eingabeelemente standardmäßig über intrinsische Abmessungen und Auffüllungen verfügen, die die Breiteneigenschaft außer Kraft setzen.

Erzielung einer Erweiterung der Eingabebreite

Damit die Eingabe die verfügbare Breite ausfüllt, Folgende Optionen können verwendet werden:

• Feste Breite: Dies ist keine ideale Lösung da unterschiedliche Inhalte innerhalb der Eingabe nicht berücksichtigt werden.
• Wrapper-Problemumgehungen: Die Verwendung eines Wrapper-Elements um die Eingabe herum kann eine Problemumgehung darstellen, fügt jedoch unnötiges HTML-Markup hinzu.
• Box-Sizing: Border-Box: CSS3 hat die Box-Sizing-Eigenschaft eingeführt, die es Elementen ermöglicht, ihre Polsterung und ihren Rand in die Box einzubeziehen Berechnung ihrer Breite, wenn sie auf „Border-Box“ eingestellt ist.

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

Unterstützung für ältere Browser

Für Browser, die CSS3-Boxgrößen nicht unterstützen, a Die Verhaltensdatei (.htc) kann zur Simulation des Border-Box-Modells verwendet werden. Dies erfordert die Verwendung von bedingten Kommentaren für Internet Explorer 6 und 7.

Durch die Verwendung dieser Techniken ist es möglich, Eingaben zu erstellen, die sich dynamisch erweitern, um die Breite ihres Containers auszufüllen, selbst mit willkürlichen Auffüllungen und Rändern. Gewährleistung eines flexibleren und konsistenteren CSS-Layouts.

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