我不知道为什么li标签比a标签高1px,代码如下 fiddle http://jsfiddle.net/9Wy8z/
#nav {
width: 100%;
background-color: #5A9AFF;
}
#nav > #nav_container > ul{
margin: 0;
padding: 0;
list-style: none;
}
#nav > #nav_container > ul > li {
display: inline-block;
padding: 10px 0;
}
#nav > #nav_container > ul > li > a {
padding: 10px;
text-decoration: none;
color: #1b1b1b;
}
#nav > #nav_container > ul > li > a:hover {
background-color: #e0e0e0;
}
<div id="nav">
<div id="nav_container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
这导致 a 标签为 38px,li 为 39px,我不确定这是为什么?
最佳答案
这是因为 a
元素默认是内联
。这就是为什么您必须向 li
元素添加填充; li
正在获取其内容的高度,这是 inline
(它不计算填充)。这种方法的问题在于 li
元素也有一些固有的填充,并且它不等于您为 a
元素提供的填充。
将 a
标记设置为 display:block;
并从 li
中删除填充将通过显示 来解决此问题
元素,而不是 block
中的 ainline
中的元素,导致 li
仅采用 a
的大小code> 元素(而不是更多)减去您尝试在补偿中添加的任何强制填充。
#nav > #nav_container > ul > li {
display: inline-block;
}
#nav > #nav_container > ul > li > a {
padding: 10px;
text-decoration: none;
color: #1b1b1b;
display: block;
}
关于html - 为什么 li 比 a 子标签高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24683579/