html - ウィンドウのサイズ変更時に互いに重なり合う要素

Question

Foundationを使用して作成したこのテンプレートでは、両方のナビゲーション バーを除いて、すべてが正しく応答しているように見えます。どちらも独立していますが、ウィンドウのサイズを変更すると互いに重なります。<div class="row">

（@media only screen and (max-width: 767px)それがまったく役立つ場合、それをさらにきれいに見せることになっている があります）。

Answer 1

ホルヘ・アギラールが言ったように、問題はfloat: noneすべてに適用されたにありました<li>。さらに、width: 100%プロパティを使用して、画面全体に要素を拡大しました（元々はフロートを使用していたようですが、オーバーラップはありません）

Answer 2

実際に、開発者ツールを使用して chrome で、または firebug を使用して firefox でページを開くと、@media のみの画面と (max-width: 767ピクセル）。css の原因を html から削除すると、より良い結果が得られるので、その css 内のどの属性が div を狂わせているかを確認することをお勧めします。

Answer 3

foundation.css (148 行目あたり) .row クラスの高さを 140px に追加し、メイン リンクをメイン コンテンツの上部のどこかに移動してみてください。そのコードは、高さ/マージンまたはdivブロックをいじる必要があります:)

編集：foundation.css行を大まかに編集する必要はありません。その特定の高さ設定用に個別のcssクラスを作成し、正しいメディアクエリ（問題が発生する幅）で使用をトリガーします。そうすれば、トップナビゲーションの周りで好きなクラスを調整できます。きれいではありませんが、うまくいきます。