内联块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立高度不适合

回答

相关问题