顶部导航栏项目切断下面的图片

Question

我正在使用 MaterializeCSS 来设计我正在创建的网站的样式。

为了让导航栏项目靠近导航栏底部，我为这些项目应用了上边距 (#normal-nav)。作为意外的副作用，导航栏下方的图片由于某种原因被剪裁了。如果我删除应用到 li 的边距，那么一切都很好。不确定我做错了什么。

Here is the issue replicated in JSFiddle。为了让您看到我遇到的问题，您需要使 window 相当大——我已将其设置为仅在桌面大小的显示器上显示这些项目。

Answer 1

这是因为您将#normal-nav 向下推到其父项之外。由于它是一个浮动元素，因此它不会增加其容器的大小，这加剧了这种情况。

参见：An article about clearfix

解决方案：

1. 减少你给的 margin-top
2. 如果您打算保持浮动，请使用 clearfix。
3. 使用浮动以外的其他方法将该导航推向右侧，例如flexbox（可能是最具扩展性的选项）。

Answer 2

而不是顶边距尝试：

#normal-nav {
    top: 64px;
    position: relative;
}