內聯塊UL立高度不適合

我有一個水平導航：內聯塊UL立高度不適合

<ul> 
    <li><a href="#">HOME</a></li> 
    <li><a href="#">FEATURES</a></li> 
    <li><a href="#">ABOUT US</a></li> 
</ul>

ul { 
list-style-type: none;             
background-color: green; 
} 

ul > li { 
    display: inline-block; 
} 

li a { 
    display: block;     
    border: 2px solid #00283a; 
    padding: 2.1em 1.5em 2.5em; 
}

其結果是：http://jsfiddle.net/a0odv8tj/2/

ul標籤的高度：95px;
li的高度標籤：95.5938px;

但我不知道爲什麼ul標籤的高度不等於li標籤的高度。你能解釋這個問題並幫我解決它嗎？非常感謝！

來源

2015-09-23 nguyenngoc101

似乎很好：http://jsfiddle.net/m9k3tasr/。你有其他的CSS規則是干涉？檢查控制檯DOM Inspector中元素的規則。 –

你的意思是李的底部邊界在ul之外嗎？ –

@ Rory McCrossan，@湯姆嚼頭Millard：是的，李的底部邊界在ul之外。你知道爲什麼嗎？謝謝 – nguyenngoc101

也許只是一個黑客，但改變

padding: 2.1em 1.5em 2.5em;

到：

padding: 2.0em 1.5em 2.5em;

接縫來解決這個

來源

2015-09-23 13:43:00

的問題與你的文本框滿溢你的錨元素做。您的問題是相對於文本的基線設置與塊級別元素的摺疊到文本大小的位置相關的。

驗證此方法的一種方法是將overflow:auto;設置爲li a並查看事情如何擴展以覆蓋該元素。

重新閱讀我寫的東西，我意識到，這不是一個好的解釋，但自從我思考細節以來，這已經有一段時間了。我稍後可能會回來編輯它。您可以閱讀the spec on this這可能是一個好主意。

來源

2015-09-23 13:55:16 Rob

內聯塊UL立高度不適合

回答

相關問題