Wie kann ich korrekt eingerückte Zeilenumbrüche in Listen mit Aufzählungszeichen erreichen?

Erzielen eingerückter Zeilenumbrüche in Aufzählungslisten

Beim Umgang mit langen Aufzählungselementen, die in eine neue Zeile umgebrochen werden, ist die Fortsetzung wünschenswert um horizontal an der ersten Zeile auszurichten. Standardmäßig wird umbrochener Text unterhalb des Aufzählungszeichens angezeigt, wodurch ein nicht ausgerichtetes Erscheinungsbild entsteht.

Um dieses Problem zu lösen, können wir einen Ansatz verwenden, der zusätzliche Divs verwendet.

Lösung

1. Wickeln Sie die Kugel in ein Div:
   Schließen Sie die Kugel in ein separates Teil ein
   Element, das eine absolute Positionierung bereitstellt und seinen Rand an das Erscheinungsbild des Aufzählungszeichens anpasst.
2. Beide Divs in ein Container-Div einschließen:
   Erstellen Sie einen Container
   um sowohl das Aufzählungszeichen als auch den Text des Listenelements aufzunehmen

   Elemente. Wenden Sie den erforderlichen Stil an, um die Auffüllung und den Überlauf zu steuern.
3. Richten Sie den Text des Listenelements aus:
   Stellen Sie im Container sicher, dass der Text
   verfügt über eine entsprechende Polsterung, um es horizontal am Aufzählungszeichen auszurichten.

Codebeispiel

.row2 {
    padding-left: 20px;
    overflow: hidden;
    max-width: 500px; 
}
.red-square-5 {
    position:absolute;
    width:5px;
    height:5px;
    margin-top: 0.5em;
    background:#f00; 
}

<div class="container-div">
    <div class="red-square-5"></div>
    <div class="row2">
        Long long long long long long long long long long long 
        long long long long long long long long long long long 
        long long long title
    </div>
</div>

Wenn Sie diesem Ansatz folgen, wird die umbrochene Zeile im Die Liste mit Aufzählungszeichen wird rechts neben dem Aufzählungszeichen eingerückt, sodass sie an der ersten Zeile ausgerichtet ist und die Lesbarkeit und Ästhetik Ihrer Liste verbessert.

Das obige ist der detaillierte Inhalt vonWie kann ich korrekt eingerückte Zeilenumbrüche in Listen mit Aufzählungszeichen erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!