0

サイトのメイン ナビゲーションとして機能する小さな水平バーがすぐ下にあるヘッダーがあります。ウィンドウがフルサイズの場合、完全に機能します。しかし、ウィンドウのサイズを少しでも小さく変更すると、フロート要素の動作が予想されるように、右端のメニューが次の行に移動します。

質問: ナビゲーション バーが常に 1 行に表示され、ウィンドウ サイズに合わせて適切にサイズ変更されるようにするにはどうすればよいですか? 長さをパーセンテージに変更してみましたが、CSS には多くのコンポーネントがあるため、これはしばしば問題を引き起こします。

関連するすべてのコードは次のとおりです。http://jsfiddle.net/HSVdg/1/

主な原因は次のとおりですが、間違っている可能性もあります。

.menu2 li {
    position: relative;
    float: left;
    width: 150px;
    z-index: 1000
}

上記のリンクに関するいくつかのメモ:

  1. ドロップダウン機能(コメントに記載されているJSおよびCSSの形式)にTiny Drop Down 2(http://sandbox.scriptiny.com/tinydropdown2/)を使用していますが、ドロップダウンは実際には機能していませんjsfiddleで。すべてのJSが私の質問とは無関係であると確信しています。

  2. ボタンは実際のバーと垂直に並んでいませんが、実際のサイトでは発生していないため、これは主な問題ではありません.

  3. jsfiddle のウィンドウ サイズは、実際にはボタンの全長に対応していないため、ボタンが次の行に移動するという問題がすぐにわかります。

どんな助けでも大歓迎です!

4

1 に答える 1

0

これは、CSS 表示モードを使用して行うことができます。

display:table を持つように ul を設定するだけで、表示する子リスト項目: table-cell

表のセルは、任意の幅で親表を埋めるために自動的に幅を調整します。

から明示的な幅を削除する必要があります

<li>

<a> 

それらを自動化できるようにします。

私はあなたのためにフィドルを更新しました: http://jsfiddle.net/HSVdg/13/

お役に立てれば。

于 2013-08-13T18:26:00.227 に答える