inline-block在導航欄上

Question

滾動瀏覽以前堆棧溢出問題的不同答案後 - 我遇到了類似於此的導航條碼。工作正常。

我的理解是通過在.ulTest裏使用內聯塊來實現導航條的水平。但是我無法真正理解它爲什麼會在.ulTest裏存在內聯塊。我嘗試添加/刪除它，並且從刪除它導航欄高度變得更小。任何人都可以向我解釋這條線實際上在做什麼以及它如何影響頁面？謝謝:)

.ulTest 
{ 
    text-align: center; 
    list-style-type: none; 
} 
.ulTest li 
{ 
    display: inline-block; 
} 
.ulTest li a 
{ 
    text-decoration: none; 
    padding: 15px 25px; 
    display: inline-block; 
    color:black; 
} 

Answer 1

因爲錨元素只會內聯，瀏覽器默認，它的高度只會是周圍線框的高度。通過將其封閉，可以使該元素的高度與周圍的父元素的高度相同，同時保持它們全都像「inline」一樣。

因此，把你的HTML和CSS並放在一起。使用您的開發人員工具，並將內聯元素和內聯塊的錨元素大小進行比較，您會發現其中的差異。作爲塊級別，您可以通過內聯無法調整的高度和邊距以及填充。