Erzielung einer horizontalen Platzierung von Formularbeschriftung und Eingabe auf derselben Linie

Bei der Webentwicklung ist die Ästhetik von Formularen entscheidend für die Benutzererfahrung. Durch die Anordnung von Beschriftungen und Eingabefeldern in derselben Zeile kann die Lesbarkeit und Benutzerfreundlichkeit des Formulars verbessert werden. In diesem Artikel wird untersucht, wie Sie ein Eingabeelement unabhängig von seiner Länge nahtlos an seiner Beschriftung ausrichten können.

Erste Versuche

Ein gängiger Ansatz, um Beschriftung und Eingabe an einem einzigen Element auszurichten line beinhaltet das Setzen der Breite der Eingabe auf auto. Dies führt jedoch häufig zu einer festen Eingabebreite. Alternativ verwenden Sie width: 100 %; verschiebt die Eingabe in eine neue Zeile und erstellt ein unerwünschtes Layout.

Lösung: Span-Element mit verstecktem Überlauf verwenden

Diese Lösung beinhaltet das Umschließen des Eingabeelements innerhalb eines Spans, was ergibt Es ist ausreichend gepolstert, um seine Position unter dem Etikett beizubehalten. Wenn Sie anschließend die Beschriftung auf „Float Left“ einstellen, wird sie nach links von der Spanne verschoben. Wenn Sie den Überlauf des Bereichs auf „Ausgeblendet“ setzen, wird sichergestellt, dass der Inhalt unabhängig von seiner Länge passt und so die gewünschte Ausrichtung entsteht.

Optimale Platzierung mithilfe von display: table-cell

Andere Der Ansatz nutzt display:table-cell, um die Beschriftung und Eingabe als Tabellenzellen zu positionieren. Dies erfordert, dass der Container als Tabelle angezeigt wird und die Breite des Etiketts festlegt, um seine Position beizubehalten, während gleichzeitig der Eingabeabstand angepasst wird, um den Abstand zu optimieren.

Implementierungsanleitung

Für das Erste Lösung: Verwenden Sie HTML-Code wie diesen:

Label

Und CSS:

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

Für die zweite Lösung:

HTML:

    Label
    

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%
}

Durch die Befolgung dieser Lösungen können Entwickler die gewünschte horizontale Ausrichtung von Beschriftungs- und Eingabeelementen erreichen und so das Formulardesign und die Benutzererfahrung verbessern.