Question

当我将鼠标悬停在导航链接上时，悬停会更改背景颜色和链接颜色，但右边框和悬停填充之间会有一小段空格。如何让悬停填充到达边界？我试过玩填充等，并将边框移动到另一个元素，但没有任何工作。我确定它的东西很小。

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

Answer 1

有几种方法可以移除空白区域。有人建议代码中没有空格，如下所示：

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

第一个将字面上的每个项目的font-size属性设置为small，第二个将.fl类中的<ul>的font-size属性设置为0，但是>选择器确保只有ul，并且它的子节点（即<li>）都不受此影响。如果字体大小为0，则根本看不到页面上的空白区域，并且会删除间隙。

你可以使用这种方法来获得它想要的方式，但这是最快的方法。

悬停和链接边界之间的空间

1 个答案: