Wie kann ich unerwünschte Leerzeichen zwischen Inline-Blocklistenelementen beseitigen?

Leerzeichen in Inline-Blocklistenelementen gelöst

Inline-Blocklistenelemente weisen häufig unerwünschte Leerzeichen zwischen ihnen auf. Dieses Problem entsteht aufgrund der Whitespace-Abhängigkeit von Inline-Block-Elementen und den Abstandseinstellungen der Schriftart.

Um dieses Problem zu beheben, ziehen Sie die folgenden Maßnahmen in Betracht:

• Gemeinsam blockieren :Fügen Sie Ihre Listenelemente in einer einzigen Zeile zusammen, um einen optimalen Abstand zu erzielen.
• Tags verbinden:Wickeln Sie die Listen Sie Element-Tags zusammen auf und eliminieren Sie den Leerraum zwischen den einzelnen Elementen:

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

Alternativ können Sie den Leerraum entfernen, indem Sie die Schriftgröße des übergeordneten Elements auf 0 setzen:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

Diese Methode setzt den Schriftabstand für das übergeordnete Element zurück und passt ihn separat für den einzelnen Listenelementinhalt an.

Das obige ist der detaillierte Inhalt vonWie kann ich unerwünschte Leerzeichen zwischen Inline-Blocklistenelementen beseitigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!