0

次の JS Fiddle は私の問題を示しています: http://jsfiddle.net/pUBuq/

メニューにカーソルを合わせると、メニューが次のように表示されることを望みます。

Header A    Header B
--------    ---------
Link 1A     Link 1B
Link 2A     Link 2B

代わりに、次のように表示されます。

Header A
Header B
Link 1A
Link 2A
Link 1B
Link 2B

マークアップは次のとおりです。

<ul id="site-nav">  
    <li>
        <a class="menu" href="#">Menu 1</a>
        <div class="site-nav-menu">
            <nav>
                <h3>Header A</h3>
                <h3>Header B</h3>
                <ul>
                    <li><a href="#">Link 1a</a></li>
                    <li><a href="#">Link 2a</a></li>
                </ul>
                <ul>
                    <li><a href="#">Link 1b</a></li>
                    <li><a href="#">Link 2b</a></li>
                </ul>
            </nav>
        </div>
    </li>  
</ul>

<h3>ヘッダーをフロートさせ、リンク要素と同じ幅にしようとしましたが、何もフロートしていないようです。CSS は少し長く、フィドルで表示するのがおそらく最適です: http://jsfiddle.net/pUBuq/

私はFF7でこれをテストしており、どこが間違っているのかを理解する助けをいただければ幸いです.

4

2 に答える 2

1

マークアップを読み取るだけの場合 (検索クローラーがサイトを表示する方法など) h3、 をsに入れると、少し読みやすくなります。ul

jsfiddle の例

ヘッダー/リンクを横に並べてフォーマットするには、nav要素の幅を設定します（width:484px上記のjsフィドルで使用され、2つのメニューリストに完全に適合します）

あなたの例ではaとh3が設定されています220pxが、ナビゲーションには自動幅があり、その親 div は絶対に配置されています (つまり、幅が設定されていない限り、そのコンテンツと同じ幅になります)。

于 2012-12-17T21:30:42.027 に答える
1

要素<h3>が広すぎます。

親要素の 1 つの幅を約 550px (220 + 220 + たまたま見られなかった余白/パディングと思われるもの) に設定した場合、または<h3>s を大幅に小さくした場合 (私はあなたが設定した幅の数、ちょうど見てください)、実際にはフロートしていることがわかります。

要素をフローティングする場合、要素が同じ行に表示されるようにするには、子の幅 + マージン + パディング + 子の境界線が親要素以下でなければならないことに注意してください。

于 2012-12-17T21:33:55.967 に答える