Wie richte ich Formularbeschriftungen und Eingaben horizontal auf derselben Linie aus?

Horizontale Platzierung von Formularbeschriftung und Eingabe auf derselben Linie erreichen

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 erläutert, 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

Bei dieser Lösung wird das Eingabeelement in einen Span eingeschlossen, 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 erstellt wird.

Optimale Platzierung mithilfe der Anzeige: Tabelle-Zelle

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 den ersten Lösung, verwenden Sie HTML-Code wie diesen:

<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>

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:

<div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text" /></span>
</div>

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.

Das obige ist der detaillierte Inhalt vonWie richte ich Formularbeschriftungen und Eingaben horizontal auf derselben Linie aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!