Question

.nav-wrapper＆gt; ul似乎有一个底部边距，但除了实际给它一个定义的高度（我不想做）之外，我无法弄清楚如何摆脱它。谁能帮助我收紧呢？

根据我的计算，它应该放在李的底部......

不得不将链接包装在Google URL Shortener中，因为它希望我包含代码......由于它很多，所以不会发生这种情况。

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

导航栏上的奇怪底部边距

1 个答案: