Wie rückt man umbrochenen Text in Listen mit Aufzählungszeichen richtig ein?

So rücken Sie die zweite Zeile eines umschlossenen Listenelements mit Aufzählungszeichen ein

Beim Arbeiten mit Listen mit Aufzählungszeichen kann ein Listenelement manchmal sehr lang sein dass es in die nächste Zeile umbricht. Standardmäßig wird der umbrochene Teil am Anfang der Linie ausgerichtet, wodurch ein unordentliches Erscheinungsbild entsteht. Um dieses Problem zu beheben, möchten wir, dass der umschlossene Teil mit der ersten Zeile des Aufzählungselements übereinstimmt.

Bei dieser Frage steht der Benutzer vor dem gleichen Problem. Ihr aktueller Code, der im Abschnitt „Probleminhalt“ bereitgestellt wird, erreicht nicht die gewünschte Einrückung. Die vorgeschlagene Lösung besteht darin, das Aufzählungselement in zwei separate Divs aufzuteilen: eines für das Aufzählungszeichen und eines für den Text. Diese Divs werden dann in ein Container-Div verpackt.

Hier ist ein verbesserter Codeausschnitt mit dem vorgeschlagenen Ansatz:

CSS

.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;
}

HTML

<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 aktualisierten Code stellt das rote Quadrat das dar Das Aufzählungszeichen wird absolut positioniert und vertikal zur ersten Textzeile ausgerichtet. Der Langtext fließt dann natürlich und richtet sich am linken Rand des Container-Divs aus. Mit diesem Ansatz wird die gewünschte Einrückung für den umschlossenen Teil des Aufzählungselements erfolgreich erreicht.

Das obige ist der detaillierte Inhalt vonWie rückt man umbrochenen Text in Listen mit Aufzählungszeichen richtig ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!