如何消除內聯塊列表項之間不需要的空格？

已解決內聯塊列表項目中的空格

內聯塊列表項之間通常會出現不需要的空格。此問題的出現​​是由於內聯塊元素與空白相關的性質以及字體的間距設定。

要解決此問題，請考慮以下措施：

• Block Together : 將清單項目合併為一行以獲得最佳間距。
• 加入標籤： 將清單項目標籤包裹在一起，消除每個項目之間的空格：

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

或者，您可以透過將父元素的字體大小設定為0 來消除空格：

ul {
    font-size: 0;
}

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

此方法會重設父元素的字體間距，並針對各個清單項目內容單獨調整字體間距。

以上是如何消除內聯塊列表項之間不需要的空格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！