0

こんにちは、絶対にばかげた問題に遭遇しています。現在、ロゴとナビゲーション アイコンの 2 つの要素を含む中央の Web サイトを設計しています。低解像度またはモバイル デバイスが原因でサイトのサイズが変更された場合でも、これら 2 つの要素の間にはスペースが必要です。

しかし、それらは常に重なり合っています！何ができるかわかりません...これは現在のマークアップです:

<div id="navContainer">  
    <div id="topNav">
        <div id="logo"><img src="images/logo.png"/> </div>
        <div id="mobileNav"><a  href="#" ><img id="hamburger" src="images/navIcon.png"></a></div>
    </div>

とそのスタイリング:

#navContainer {margin:0 auto;}
#navContainer:hover{background: rgba(255,255,255,0.2);cursor: pointer; width:100%;}
#topNav{width:50%; margin:0 auto;}
#logo{text-align:left; min-width:250px;}
#mobileNav{text-align:right; position:relative; bottom:50px; }

私の目標は、ナビゲーションをhttp://www.teehanlax.com/のように機能させることです。

4

3 に答える 3

0

必要以上に追加していると思います。ロゴと mobileNav の div を取り出して、リンク タグを右にフロートさせると、探しているものが得られます。

<div id="navContainer">
    <div id="topNav">
        <img src="images/logo.png" />
        <a href="#"><img id="hamburger" src="images/navIcon.png"/></a>
    </div>
</div>

a{
    float:right;
}

デモ: http://jsfiddle.net/39QVp/

于 2013-08-08T16:02:04.923 に答える
0

画像を使用しているため、両方の div のサイズを追加します。次に、要素を左右にフロートします。これで問題が解決するはずです。

#logo{text-align:left; min-width:250px; float:left;}
#mobileNav{text-align:right; position:relative; bottom:50px; float:right}
于 2013-08-08T15:15:53.953 に答える