Warum haben meine Inline-Blocklistenelemente unerwünschte Ränder?

Unerwünschter Rand in Inline-Blocklistenelementen

Problem:
Sie haben Inline-Blocklistenelemente, die aus unerklärlichen Gründen einen Rand aufweisen sie, obwohl Sie in Ihrem CSS den Rand auf 0 gesetzt haben Regeln.

Ursache:
Das Problem entsteht durch die Verwendung von display: inline-block; für die Listenelemente. Inline-Block-Elemente reagieren empfindlich auf Leerzeichen und führen rechts von jedem Element einen 4-Pixel-Rand ein.

Lösung 1: float: left;
Um den Rand zu entfernen, ändern Sie die Anzeige Eigenschaft zum Floaten: left;. Dadurch wird der durch den Inline-Block eingeführte Abstand entfernt.

Lösung 2: Leerzeichen verhindern
Alternativ können Sie verhindern, dass sich Leerzeichen auf die Inline-Block-Elemente auswirken, indem Sie alle Leerzeichen zwischen der Liste entfernen Artikel-Tags, wie unten gezeigt:

<ul>
  <li><div>first</div></li><li><div>first</div></li><li><div>first</div></li><li><div>first</div></li>
</ul>

Eine andere Lösung: Ende und Anfang blockieren Tags
Sie können auch die End- und Anfangs-Tags zusammen blockieren und so erzwingen, dass die Listenelemente als eine fortlaufende Zeile behandelt werden:

<ul>
  <li><div>first</div></li><li><div>first</div></li><li><div>first</div></li><li><div>first</div></li>
</ul>

Das obige ist der detaillierte Inhalt vonWarum haben meine Inline-Blocklistenelemente unerwünschte Ränder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!