Question

我在很长一段时间里一直是前端开发人员，直到今天才遇到这个问题。在我的主导航中，我使用了大量的右边填充，因此我的悬停下拉列表范围很广。

基本上，我的问题在于此代码：

HTML：

<div id="header">
    <div class="main-wrap">
        <div class="logo">
            <a href="/"><img src="" alt="" /></a>
        </div><!--end logo-->
        <div class="mobile-logo">
            <a href="/"><img src="" alt="" /></a>
        </div>
        <ul class="main-nav" aria-hidden="false" role="menubar">
            <li><a href="">Future Students</a><img class="nav-arrow" alt="" src="" /></a></li>
            <li><a href="">Future Students</a><img class="nav-arrow" alt="" src="" /></a></li>
            <li><a href="">Future Students</a><img class="nav-arrow" alt="" src="" /></a></li>
            <li><a href="">Future Students</a><img class="nav-arrow" alt="" src="" /></a></li>
        </ul><!--end main-nav-->
    </div><!--end main-wrap-->
</div><!--end header-->

CSS：

#header .main-wrap .main-nav li {
    display: inline-block;
    width: 146px;
    text-align: left;
    padding: 7px 15px 0px 22px;
    position: relative;
    border-left: 1px solid #782f40;
    height: 100%;
    cursor: pointer;
}

#header .main-wrap .main-nav li a {
    font-family: 'open-sans';
    font-style: normal;
    font-weight: 600;
    color: #5e5e5e;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 25px;
    padding-bottom: 33px;
    padding-right: 40px;
}

我知道这是非常基本的，但由于某种原因，我无法弄清楚导致这个问题的原因。在Chrome和IE中，一切看起来都很棒。但是在Firefox中，链接分为三行，锚点中的文本不会填充列表项的宽度。有人知道快速解决方案吗？

Answer 1

我可以看到可能导致问题的几个原因。

文字未填充空格：菜单中li标记的设置宽度为146像素。默认情况下，文本只会保留在其容器中。文本的总长度超过146像素，因此通过将菜单的宽度设置为较宽的宽度，文本将包裹到下一行以适合设置的宽度。

Solutiuon：将li的宽度设置为auto

将包装链接到3行：这是因为您的padding-bottom标记上的a值很大，为33px。默认情况下，在元素上填充增加元素的大小，尤其是顶部和底部填充。因此，您的总链接高度包括：2 x行文本+ 33px。

解决方案：将padding-bottom标记上的a值更改为空，或者只是将其降低到您满意的值，例如： 5px或0.2em - 取决于你想要达到的目标。

仅在Firefox中由于填充而导致链接中断

1 个答案: