下にある画像を切り取るトップのナビゲーション項目

Question

私は作成しているウェブサイトをスタイルするためにMaterializeCSSを使用しています。

Navbarの項目がNavbarの下部になるように、それらの項目に上端を適用しました（#normal-nav）。意図しない副作用として、navbarの下の画像がなんらかの理由でクリップされます。私がliに適用したマージンを取り除くと、すべてがうまくいきます。私が間違っていることを確信していない。

Here is the issue replicated in JSFiddle。私が抱えている問題を見るためには、ウィンドウをかなり大きくする必要があります。デスクトップサイズのディスプレイにしか表示されないように設定しています。

Answer 1

：

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

私はまた `.nav-ラッパーli`を行うと、それに上マージンを追加しようとしたと述べている必要があります

Answer 2

これは、＃normal-navを親を越えて押し下げたからです。これはfloat要素であるため、コンテナのサイズが増加しないという事実によって悪化します。

参照：An article about clearfix

ソリューション：

1. マージントップあなたはフロートを維持する上で意図している場合は、
2. 使用clearfixを与えているの減少。
3. float以外の方法を使用して、そのナビゲーションを右にプッシュします。 flexbox（おそらく最もスケーラブルなオプション）。代わりに、トップマージントライの