Wie kann man mit CSS unerwünschte Einrückungen in umschlossenen ungeordneten Listen beseitigen?

Ungeordnete Listeneinrückung mit CSS entfernen

Wenn Text in einer ungeordneten Liste umbrochen wird, können unerwünschte Einrückungen auftreten. Um dieses Problem zu beheben, versuchen Sie die folgenden Schritte:

1. Einrückung entfernen

Standardauffüllung und Einrückung im Listenstil löschen:

ul {
    padding: 0;
    list-style-type: none;  
}

2. Zeilenhöhe verringern

Verringern Sie bei Bedarf die Zeilenhöhe, indem Sie sie auf die Schriftgröße oder etwas kleiner einstellen:

ul li {
    line-height: 1em;
}

3. Float deaktivieren

Entfernen Sie alle Float-Eigenschaften, die auf Listenelemente angewendet werden, und stellen Sie sicher, dass stattdessen Inline-Block angezeigt wird:

ul li {
    float: none;
    display: inline-block;
}

4. Passen Sie die Schriftgröße an

Passen Sie als letzten Schritt die Schriftgröße an Ihr gewünschtes Erscheinungsbild an.

Beispiel

Bedenken Sie den folgenden Code:

<div>
<pre class="brush:php;toolbar:false">#info {
    ...
}

#info ul {
    padding: 0;
    list-style-type: none;
}

#info ul li {
    float: none;
    display: inline-block;
    line-height: 1em;
}

Diese Kombination von Techniken sollte die Einrückung durch umbrochene Zeilen in ungeordneten Listen beseitigen und so sicherstellen ein sauberes und professionelles Erscheinungsbild.