导航栏项目移动答案

【问题标题】：Navigation bar items moving导航栏项目移动
【发布时间】：2015-10-07 07:33:38
【问题描述】：

当我将鼠标悬停在菜单项上时，它们并不总是完全适合导航栏，我也无法修复边框和最后一个导航项之间的微小间隙，并且当我放大/缩小页面时间隙会发生变化，当我在谷歌浏览器上放大/缩小并将鼠标悬停在菜单项上时，悬停的项目会比栏的其余部分高。我一直试图弄清楚这一点已经有一段时间了。提前感谢您的帮助。

主要目标：消除“联系人”旁边的空白，使悬停的项目适合导航栏，修复 google chrome 导航栏缩放问题。

这是我的代码笔：http://codepen.io/anon/pen/QbBgKR

<nav class="menu">

        <ul class="clearfix">

            <li><a  href="#">HOME</a> </li>

            <li><a  href="#">PROFILE</a></li>

            <li><a  href="#">STUFF</a></li>

            <li><a href="#">STUFF</a></li>

            <li id="long"> <a href="#">PRODUCTS<span class="arrow">&#9660;</span></a> 

                <ul class="sub-menu">

                    <li><a href="#">STUFF1</a></li>

                    <li><a href="#">STUFF2</a></li>

                    <li><a href="#">STUFF3</a></li>

                </ul>

            </li>

            <li><a href="#">CONTACT</a></li>

        </ul>

    </nav><!-- menu -->

    .clearfix:after {

    display: block;
    clear: both;

}

.clearfix {

    margin-left: -37px;

}

nav {

    font-size: 1em;
    width: 700px;
    background-color: #3A5199;
    font-family: Verdana;
}

#current {

    background-color: #6082ec; 

}



.menu li {

    display: inline-block;
    list-style: none;
    position: relative;
    width: 15.2%;
    text-align: center;
    margin-left: -0.4%;
    margin-right: -0.4%;

}


.menu li:hover {

    background-color: #6082ec;

}

.menu a {

    text-decoration: none;
    color: white;
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
}



#long {

    width: 24%;

}

.menu .arrow {

    font-size: 12px;
    line-height: 0%;

}

.sub-menu {

    width: 128px;
    position: absolute;
    z-index: -1;
    opacity: 0;
    transition: opacity linear 0.15s;
    background-color : #6082ec;


}

.menu li:hover .sub-menu {

    z-index:1;
    opacity:1;

}

.sub-menu li:hover {

    background-color: #3A5199;

}

.sub-menu li {

    width: 131%;
    display: block;
    right: 39.2px;


}

.sub-menu a {

    position: relative;
    text-align: center;    

}

【问题讨论】：

您可以将您的.menu li 更改为margin-right: -0.3%; 吗？
我猜你没有使用重置样式表？（如meyerweb.com/eric/tools/css/reset）
您应该使用padding，而不是为每个元素设置一个固定的width。

标签： html css

【解决方案1】：

UL 的负边距有效。

.clearfix {

  margin-left: -37px;
  margin-right:-0.4%;

}

她的数学很奇怪 - 恕我直言。

【讨论】：

【解决方案2】：

使用reset stylesheet 或normalize.css 之类的东西将大大有助于消除跨浏览器的各种边距、填充和显示不一致问题，而且您不必执行负边距“hacks”就像你为 .clearfix 所做的那样。

虽然您已经正确计算了您的百分比，使您的li 加起来达到 100%，但联系人右侧的间隙会随着您应用的百分比宽度的像素四舍五入而出现。

15.2% of 700px = 106.4px

浏览器可能会向下舍入到106px。缩放时间隙的变化也可能与百分比宽度有关。在一个缩放级别，值会以不同的方式四舍五入。

106px * 5 = 530px + 24% of 700px (168px) = 698px

既然您在<nav> 元素上使用了固定宽度，为什么不在li 上也使用固定宽度呢？或者稍微改变百分比值。与 Profile 相比，主链接的 15.2% 在文本 Home 和 li 的左右边缘之间创建了更多的填充。

固定宽度解决方案

/* default width for all li */
.menu li {
    width: 108px;
}
/* Home */
.menu li:nth-child(1) {
    width: 100px;
}
/* Products */
.menu li:nth-child(5) {
    width: 168px;
}

至于放大 Chrome 并在悬停时改变高度，我无法复制该问题。

【讨论】：