Wie kann verhindert werden, dass umschlossene Aufzählungslistenelemente eingerückt werden?

Einrückung umschlossener Aufzählungslistenelemente

Wenn ein langes Listenelement in eine neue Zeile umgebrochen wird, erscheint der umbrochene Teil häufig eingerückt unter dem Aufzählungszeichen. In bestimmten Szenarien kann es jedoch wünschenswert sein, den umgebrochenen Text vertikal mit der ersten Zeile auszurichten.

Um dies zu erreichen, sollten Sie die Verwendung einer zweistufigen Containerstruktur in Betracht ziehen. Wickeln Sie das Aufzählungszeichen in einen eigenen Container und platzieren Sie es neben einem Container für den Text des Listenelements. Indem Sie diese Container in einem übergeordneten Container verschachteln, können Sie die Positionierung und Ausrichtung der Elemente steuern.

.container-div {
    padding-left: 20px;
}

.red-square-5 {
    position: absolute;
    width: 5px;
    height: 5px;
    margin-top: 0.5em;
    background: #f00;
}

.row2 {
    overflow: hidden;
    max-width: 500px;
}

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

Bei diesem Ansatz wird der umbrochene Text links angezeigt und an der ersten Zeile ausgerichtet , während das Aufzählungszeichen an seiner ursprünglichen Position bleibt. Diese Technik bietet eine präzise Kontrolle über die Einrückung und das Layout Ihrer Aufzählungslisten.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass umschlossene Aufzählungslistenelemente eingerückt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!