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

Einrücken nachfolgender Zeilen umbrochenen Etikettentextes

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

<code class="css">.checkbox-field {
  display: flex;
  flex-direction: row;
}</code>

Beispielverwendung:

<code class="html"><div class="checkbox-field">
  <input type="checkbox" id="check">
  <label for="check">Field 2 Label, may be longer than normal, This is an example for this lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</label>
</div></code>

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

Das obige ist der detaillierte Inhalt vonWie rücke ich nachfolgende umbrochene Beschriftungszeilen in CSS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!