Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie richtet man Beschriftungen und Eingabefelder in Webformularen horizontal aus?

Patricia Arquette
Freigeben: 2024-11-02 09:14:02
Original
910 Leute haben es durchsucht

How to Align Labels and Input Fields Horizontally in Web Forms?

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%
}
Nach dem Login kopieren

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%
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!