Wie richtet man umschlossene Aufzählungslistenelemente an ihrer ersten Zeile aus?

Zweite Zeile des Aufzählungselements an der ersten Zeile ausrichten

Wenn sich ein Listenelement mit Aufzählungszeichen über mehrere Zeilen erstreckt, ist es oft wünschenswert, die Zeilen umgebrochen zu haben An der ersten Zeile ausrichten, anstatt darunter zu erscheinen Aufzählungszeichen.

Lösung:

Um diese Ausrichtung zu erreichen, teilen Sie das Aufzählungszeichen in ein separates Div auf und schließen Sie sowohl das Aufzählungszeichen als auch den Text in ein Container-Div ein:

.container-div {
    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>

In diesem Beispiel:

• Das Container-Div bietet zusätzliche Polsterung, um einen Rand zu schaffen das Aufzählungszeichen.
• Das Aufzählungszeichen wird mithilfe von position: absolute absolut innerhalb von Container-Div positioniert.
• Der Text wird in der Zeile 2 des Divs innerhalb von Container-Div platziert.

Dieser Ansatz stellt sicher, dass die umbrochenen Zeilen des Aufzählungselements wie gewünscht an der ersten Zeile ausgerichtet sind.

Das obige ist der detaillierte Inhalt vonWie richtet man umschlossene Aufzählungslistenelemente an ihrer ersten Zeile aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!