Warum gibt es unerwünschte Ränder in meinen Inline-Blocklistenelementen?

Unerwünschter Rand in Inline-Block-Listenelementen

In einem Szenario, in dem ein HTML-Layout eine Liste von Inline-Block-Elementen umfasst, kann dies passieren stoßen Sie auf unerwünschte Ränder, die um die Listenelemente herum erscheinen. Um dieses Problem zu beheben, ist es wichtig, die Ursache zu verstehen und die geeignete Lösung zu finden.

Ursache der Marge:

Das Problem entsteht durch die Verwendung von Display: Inline-Block für Listenelemente. Inline-Block-Elemente erzeugen von Natur aus Leerzeichen, was zu einem 4-Pixel-Rand rechts von jedem Element führt.

Lösung 1: Konvertieren in float: left;

Einfaches Ändern des Wenn Sie die Anzeigeeigenschaft „float: left“ für die Listenelemente verwenden, wird der unerwünschte Rand entfernt.

li {
    float: left;
    ...
}

Lösung 2: Listenelement-Tags verketten

Alternativ können Sie das Leerzeichen entfernen, indem Sie die Listenelement-Tags zu einem einzigen verketten Zeile.

• first
• first
< ;li>
first
• first

Lösung 3: Block-Tags entfernen

Eine weitere Möglichkeit besteht darin, Block-Tags innerhalb der Listenelemente zu entfernen, um sicherzustellen, dass alle Inhalte auf einem einzigen gerendert werden Zeile:

• first