Top Navbar Artikel schneiden Bild unten

Question

Ich benutze MaterializeCSS, um eine Website zu gestalten, die ich erstelle.

Damit ich die Navbar-Elemente auf den unteren Rand der Navigationsleiste bringen kann, habe ich einen oberen Rand auf diese Elemente angewendet (#normal-nav). Als unbeabsichtigter Nebeneffekt wird das Bild unter der Navigationsleiste aus irgendeinem Grund abgeschnitten. Wenn ich den Rand entferne, den ich auf die li angewendet habe, dann ist alles in Ordnung. Ich bin mir nicht sicher, was ich falsch mache.

Here is the issue replicated in JSFiddle. Damit Sie das Problem sehen können, das ich habe, müssen Sie das Fenster ziemlich groß machen - ich habe es eingerichtet, so dass diese Elemente nur auf Desktop-Displays angezeigt werden.

Answer 1

Statt der oberen Rand try:

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

Answer 2

Es liegt daran, dass Sie das # normal-nav nach unten gedrückt haben. Dies wird durch die Tatsache verstärkt, dass es ein floatiertes Element ist, wodurch es nicht die Größe seines Containers erhöht.

See: An article about clearfix

Lösungen:

1. Eine Verringerung der die margin-top Sie geben
2. Verwenden Sie ein clearfix, wenn Sie auf der Beibehaltung der Schwimmer Absicht sind.
3. Verwenden Sie eine andere Methode als Float, um das Navigationsgerät nach rechts zu schieben, z. Flexbox (wahrscheinlich die am besten skalierbare Option).