html - Navbarsと液体のデザイン

Question

私の新しいウェブサイトでは、リキッドレイアウトの使用に本当に焦点を合わせています。ただし、ナビゲーションバーを正しく取得できないようです。現在、フローティングリストで構築された水平ナビゲーションバーを使用しています。左に浮かぶボタンと右に浮かぶボタンの両方があります。私の問題は、ウィンドウの幅が狭くなりすぎると、一部のボタンがドキュメントの次の行にジャンプすることです。避けたい、または少なくとも見栄えを良くしたいもの。何か案は？

Answer 1

例を見なくても、メディア クエリの使用を開始する必要があると思います。メニューが途切れるブラウザーの幅を見つけて、これを CSS に追加します。

@media all and (max-width: ???px) {
    #yournavbar {
        /* some styles here that change your navbar /*

    }
}

そうすれば、常に同じように機能し、見栄えがよくなるようにナビゲーションバーのスタイルを設定する必要はありませんが、特定のしきい値の下 (または上) でスタイルを変更するだけで、異なる動作を開始することができます。状況。

Answer 2

固定幅のナビゲーション バーの li 要素はありますか? はいの場合、それらの周りのラッパーは、追加されたウィズとマージンに等しい固定幅を持つ必要があります。これにより、フロートのドロップが防止されます。

別のオプションは、レイアウト全体で最小幅を使用してスクロール バーを強制することです。これにより、フロート ドロップも防止されます。