html - 调整 <li> 元素上 border-bottom 的长度

Question

我一直在摆弄这个导航栏，除了这个小问题外，我几乎把所有事情都搞定了。简单地说，每当我将鼠标悬停在导航栏中的一个词上时，它下面就会出现一条小红线。我遇到的唯一问题是我想稍微延长那条红线。

我唯一一次在这件事上得到一条延长的红线是当我使用这段代码时:

li.nav2:hover {
  border-bottom:3px solid red;
  padding-bottom:1px;
}

现在的问题是它有点破坏导航栏的流程。

这是我的 jsfiddle:http://jsfiddle.net/q23XN/1/

Answer 1

回答:

根据您的功能执行此操作的最佳方法是使用绝对定位到 <a> 的子元素。将作为边界:

HTML:

<li class="nav1"><a href="http://www.google.com/">home<b/></a></li>

注意新的 <b/>在那里。

CSS:

li.nav1 a, li.nav2 a
{
    position: relative;
}

li.nav1 a b, li.nav2 a b
{
    position: absolute;
    top: 100%;
    left: -20px;

    display: none;
    width: 100%;
    height: 3px;
    background: red;
    padding: 0px 20px;
}

li.nav1 a:hover b, li.nav2 a:hover b{
    display: block;
}

通过定位 <a>相对元素，我可以定位一个子元素，我称之为 <b>在它下面(使用 top: 100% )。然后通过在该元素上使用填充，我可以使它比父元素更宽，并使用 left: -20px 将它滑到左边。 . (您可以更改附加宽度，但请确保在 padding: 和 left: 中设置相同的数字)。

最后，我将其显示设置为 none通常，然后当 parent <a>收到悬停事件，我将其显示设置为 block使用这个选择器:

li.nav1 a:hover b, li.nav2 a:hover b

JSFiddle

---

其他想法:

您可以在 <a> 上使用侧边距来做到这一点:

li a
{
    padding: 0px 20px;
}

JSFiddle

---

如果您只想扩展 <a> onHover 的宽度，你可以用 li a:hover 来做到这一点:

li a:hover
{
    padding: 0px 20px;
}

但这会使链接变宽，并可能影响链接的位置。

JSFiddle

---

如果你想维护<a>宽度，您可以对整个 <li> 执行此操作并将边距底部设置为边框宽度的负值:

li.nav1:hover, li.nav2:hover {
    border-bottom:3px solid red;
    margin-bottom: -3px;
}

JSFiddle

---

注意事项:

一方面，在您原来的 fiddle 中，您的顶部栏的选择器是

li.nav1 a:hover {

当你的底部栏的选择器是

li.nav2:hover {

因此，您将填充添加到 <li> s，而不是 <a> s 在第二个导航中。