„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > Wie rücke ich nachfolgende umbrochene Beschriftungszeilen in CSS ein?

Wie rücke ich nachfolgende umbrochene Beschriftungszeilen in CSS ein?

Veröffentlicht am 08.11.2024
Durchsuche:677

How to Indent Subsequent Wrapped Label Lines in CSS?

Einrücken nachfolgender Zeilen umbrochenen Etikettentexts

Bei Einschränkungen bei der Formularbreite kann der Etikettentext auf mehrere Zeilen umgebrochen werden, was zu ästhetischen Problemen führt Anliegen. Während die erste Zeile aufgrund des Vorhandenseins eines Eingabeelements eingerückt ist, ist dies bei nachfolgenden Zeilen möglicherweise nicht der Fall, wodurch ein ungleichmäßiges Erscheinungsbild entsteht.

Um eingerückte zweite und nachfolgende Zeilen nur mit CSS zu erzielen, sollten Sie den folgenden Ansatz in Betracht ziehen:

Schließen Sie sowohl das Eingabeelement als auch seine Beschriftung in einen übergeordneten Container mit der Klasse "checkbox-field" ein. Setzen Sie die Anzeigeeigenschaft dieses übergeordneten Elements auf "flex" und die Flex-Richtung auf "row".

.checkbox-field {
  display: flex;
  flex-direction: row;
}

Beispielverwendung:

Diese Lösung passt den Etikettentext flexibel an die verfügbare Breite an und sorgt gleichzeitig für ein einheitliches visuelles Erscheinungsbild.

Freigabeerklärung Dieser Artikel wird unter folgender Adresse abgedruckt: 1729725831 Bei Verstößen wenden Sie sich bitte an [email protected], um ihn zu löschen
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3