Wie richtet man Beschriftungen und Eingabefelder in Webformularen horizontal aus?

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:

• Stellen Sie sicher, dass die Beschriftung und das Eingabeelement dieselbe Zeile einnehmen.
• Erweitern Sie die Breite des Eingabefelds, um den verbleibenden Platz auszufüllen, unabhängig von der Länge der Beschriftung.

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

• Erstellen Sie einen Container für Sowohl Label als auch Eingabeelement.
• Verschieben Sie das Label nach links, damit die Eingabe den verbleibenden Platz einnehmen kann.
• Überlauf im Container des Labels ausblenden, um doppelreihiges Verhalten zu verhindern.
• Breite festlegen: 100 % für das Eingabeelement.

**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.

• Erstellen Sie einen Wrapper-Container und setzen Sie seine Anzeigeeigenschaft auf Tabelle.
• Legen Sie die Bezeichnung als Anzeige fest: Tabellenzelle mit Breite: 1 Pixel und Leerraum: Nowrap, um einen Überlauf zu verhindern.
• Eingabefeld als Anzeige festlegen: Tabellenzelle und Breite: 100 %.

**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!