Beschriftungen und Eingabeelemente horizontal ausrichten
Um die Ästhetik von Webformularen zu verbessern, ist die Fähigkeit erforderlich, Beschriftungen und Eingabefelder nebeneinander zu positionieren. Dieser Leitfaden veranschaulicht, wie Sie diese horizontale Ausrichtung mithilfe von CSS erreichen.
Das Problem:
Wie im ersten Beitrag hervorgehoben, gibt es zwei Hauptherausforderungen:
Lösung 1: Inline-Block
Die Verwendung von display: inline-block für Beschriftungs- und Eingabeelemente ermöglicht eine horizontale Ausrichtung unter Beibehaltung ihrer individuellen Größe. Dies erfüllt jedoch möglicherweise nicht die Anforderung, die verbleibende Breite für das Eingabefeld auszufüllen.
Verbesserte Lösung: Float/Overflow Magic
**CSS:
label { float: left } span { display: block; overflow: hidden; padding: 0 4px 0 6px } input { width: 100% }
Lösung 2: Tabellenzelle
Ein weiterer effektiver Ansatz besteht darin, beide Elemente als Tabellenzellen zu behandeln.
**CSS:
.container { display: table; width: 100% } label { display: table-cell; width: 1px; white-space: nowrap } span { display: table-cell; padding: 0 0 0 5px } input { width: 100% }
Das obige ist der detaillierte Inhalt vonWie richtet man Beschriftungen und Eingabefelder in Webformularen horizontal aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!