盘旋和链接边界之间的空间

当我将鼠标悬停在导航链接上时，悬停改变了背景颜色和链接颜色，但是在右边框和悬停填充之间有一个很小的空白条。悬停填充如何到达边界？我试图玩弄填充等，并将边框移动到另一个元素，但没有任何工作。我相信这是如此之小。盘旋和链接边界之间的空间

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; 
}

来源

2014-01-21 saraht

'inline'元素的典型特征。一种解决方案是去除空格中的标记 - 看到这个[更新示例]（http://jsfiddle.net/Ue6J9/）参见[该SO回答]（http://stackoverflow.com/a/19038859/2680216） –

你会期望'li's之外的空白被忽略，因为不应该有任何内容。但看起来JoshS是对的。 – GolezTrol

@joshC你是对的！我认为这发生在我以前，这是我所期望的最后一件事。感谢您的提醒！！ :) – saraht

有几种方法来去除空白。有人建议在代码中确实没有空格，如下所示：

<ul><li>First Link</li><li>Second Link</li></ul>

但是，编码器可能会难以阅读。另一个建议是使用代码的间隙之间HTML注释，如下所示：

<ul> 
    <li></li><!-- 
    --><li></li><!-- 
    --><li></li><!-- 
    --><li></li> 
</ul>

另一种方法是把关闭标签的最后一个字符的下一个tag之前，让白色空间是一个标签中：

<ul> 
    <li></li 
    ><li></li 
    ><li></li 
    ><li></li> 
</ul>

尽管这两种方法在眼睛上比第一种方法更容易，但希望看到一切都整齐的编码人员也会遇到问题。我是一个这样的编码员，我更喜欢使用另一种方法。

以下内容添加到您的CSS：

*{font-size:small;} 
.fl>ul{font-size:0;}

第一个将每一个项目的字体大小属性设置字面上小，第二个将设置.fl内<ul>的字体大小属性类设置为0，但>选择器确保只有ul及其子代（即<li>）不受此影响。在字体大小为0时，根本看不到页面上的空白区域，并且删除了间隙。

你可以使用这种方法玩弄你想要的方式，但这是最快捷的方法。

来源

2014-01-21 21:52:31 Hiigaran

哇感谢这些提示！ – saraht

盘旋和链接边界之间的空间

回答

相关问题