我的导航栏上奇怪的底部边距

Question

.nav-wrapper>ul 似乎有一个底部边距，但除了实际给它一个定义的高度（我不想这样做）之外，我不知道如何摆脱它.谁能帮我收紧这个？

根据我的计算，它应该在 li 的底部……

必须将链接包装在 Google URL Shortener 中，因为它希望我包含代码......由于它很多，这不会发生。

My CodePen Example

Answer 1

您的问题是您对 .nav-wrapper ul 元素的间距修复：

.nav-wrapper ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}

这是在您的列表元素下方创建一个元素并创建该空白空间。 您可以通过将其更改为：

.nav-wrapper ul:after {
    content: '';
    display: block;
    width: 100%;
    height:0px;
}

但你会失去你所拥有的良好的均匀间距。

不幸的是，这种分隔li 项目的方法会产生下方空白空间的副作用，因此您摆脱该空间的唯一选择是更改分隔li 元素的方式。

我建议以下方法：

nav-wrapper li {
    display: block;
    text-align: center;
    background: none;
    transition: background-color 300ms ease;
    width: 16.6666667%;
    float: left;
}

.nav-wrapper a {
    position: relative;
    display: inline-block;
    width: 128px;
    text-decoration: none;
    color: white;
    padding: 10px 0;
    background: #34495e;
    transition: background-color 300ms ease;
}

.nav-wrapper li a:hover {
    background: #d5051d;
}