Question

我有一个水平导航使用内联块作为li标签的代码：

<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标签的高度。你能解释一下这个问题并帮我解决吗？非常感谢你！

Answer 1

可能只是一个黑客，但正在改变

padding: 2.1em 1.5em 2.5em;

为：

padding: 2.0em 1.5em 2.5em;

接缝来解决这个问题

Answer 2

问题与你的文本溢出你的锚元素的行框有关。您的问题与设置文本基线的位置相对，而块级元素则折叠为文本大小。

验证这一点的一种方法是将overflow:auto;设置为li a并查看扩展内容以涵盖该元素。

重新阅读我所写的内容，我意识到，这不是一个很好的解释，但是我已经考虑了细节已经有一段时间了。我可以稍后回来编辑。

或者你可以阅读the spec on this，这可能是一个好主意。

内联块ul li高度不适合

2 个答案: