Heim > Web-Frontend > CSS-Tutorial > Wie kann man mit CSS unerwünschte Einrückungen in umschlossenen ungeordneten Listen beseitigen?

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

Patricia Arquette
Freigeben: 2024-12-01 16:41:13
Original
818 Leute haben es durchsucht

How to Eliminate Unwanted Indentation in Wrapped Unordered Lists with CSS?

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;  
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren
#info {
    ...
}

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

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

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

Das obige ist der detaillierte Inhalt vonWie kann man mit CSS unerwünschte Einrückungen in umschlossenen ungeordneten Listen beseitigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage