<分区>
<分区>
当我将鼠标悬停在导航链接上时，悬停会更改背景颜色和链接颜色，但是在右边框和悬停填充之间有一小段空间。悬停填充如何到达边界？我试过使用填充等，并将边框移动到另一个元素，但没有任何效果。我敢肯定它很小。
HTML
<nav id="bottomNavWrap">
<nav id="bottomNav" class="fl">
<ul>
<li><a href="#">汽车首页</a></li>
<li><a href="#">购车必读</a></li>
<li><a href="#">新车导购</a></li>
<li><a href="#">新车排行榜</a></li>
<li><a href="#">最新促销</a></li>
<li><a href="#">维修问答</a></li>
<li class="last"><a href="#">车行搜索</a></li>
</ul>
</nav>
CSS
#bottomNavWrap {
height: 34px;
width: 900px;
margin-left: auto;
margin-right: auto;
}
#bottomNav {
display: inline-block;
}
#bottomNav ul {
color: #fff;
font-size: 120%;
font-weight: 500;
text-align: left;
}
#bottomNav ul li {
display: inline;
}
#bottomNav li a {
border-left: solid 1px #454b95;
width: 80px;
padding-bottom: 7px;
padding-top: 7px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
color: #fff;
}
#bottomNav li a:hover {
color: #000;
background-color: #FFF;
}
#bottomNav li.last a {
border-right: solid 1px #454b95;
}
最佳答案
有几种方法可以去除空白。有些人建议在代码中完全没有空格，如下所示:
<ul><li>First Link</li><li>Second Link</li></ul>
但是，这对于编码人员来说可能变得难以阅读。另一个建议是在代码间隙之间使用 HTML 注释，如下所示:
<ul>
<li></li><!--
--><li></li><!--
--><li></li><!--
--><li></li>
</ul>
另一种方法是将结束标记的最终字符放在下一个标记之前，这样空白就在标记内:
<ul>
<li></li
><li></li
><li></li
><li></li>
</ul>
虽然这两种方法比第一种更容易在眼睛上看到，但喜欢看到一切整洁的编码人员也会对此产生疑问。我就是这样的编码员，我更喜欢使用另一种方法。
将以下内容添加到您的 CSS:
*{font-size:small;}
.fl>ul{font-size:0;}
第一个将逐字设置每个元素的字体大小属性为小，第二个将设置 <ul> 的字体大小属性在 .fl 类中为 0，但 >选择器确保只有 ul 及其子项(即 <li>)不会受此影响。在字体大小为 0 时，您根本看不到页面上的空白区域，并且空白已被删除。
您可以尝试使用此方法以按照您想要的方式获得它，但这是最快的方法。
关于html - 悬停和链接边框之间的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21268573/