別の要素を他の配置要素と結合する方法を教えてください。

Question

私はnavbarの位置づけに問題を抱えています。 Mozillaを除いてズームイン/ズームアウトするときに問題が発生します。私はコーディングのノブであるため、専門家に解決策を求めるよりも選択肢がありません。

クロームズームアウト：https://s31.postimg.org/ud3lz1i3v/zoom_out_moz.png

は基本的に、私はそれが移動しないように別のdiv要素と私のナビゲーションバーに参加したい：（ズーム・インでも完璧）https://s31.postimg.org/kjnbou0yj/zoom_out_chrome.png

Mozillaのズームアウトその位置から私は使用する方法を知らない：ターゲットなど、そしてターゲットが私の問題を解決するかどうかわからない。

私の必要性：私はちょうど1つのサイズに固執するために私のnavbarが必要です。現在の設定では、MOZILLA ONLYと完全に機能しています。ズームアウト時とズームイン時にクロムや他のブラウザに空白が表示される理由はわかりません。 Chrome 100％ズームでうまく動作し、Opera 100％ズームでうまく動作します。問題は、ズームインまたはズームアウト時に発生します。やはり、ズームなどでは、モジラにとって問題はありません。私のnavbarも敏感です。

私の推測：このnavbarをhidden divクラスに付けるとこの問題を解決できると思います。しかし、私はコーディングの完全なnoobであり、私はちょうど推測することができます。ここで

は私のナビゲーションバーのコードです：

ul.pnav { 
    position: relative; 
    border-top-left-radius: 15px; 
    border-top-right-radius: 15px; 
    border: none; 
    list-style-type: none; 
    width: 900px; 
    height: 55px; 
    margin: auto; 
    top: 281px; 
    left: 0; 
    right: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #767676; 
    z-index: 9999; 
} 


@-moz-document url-prefix() { 
ul.pnav { 
top: 286px 
} 
} 


ul.pnav li {float: left;} 

ul.pnav li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 3s; 
    font-size: 17px; 
    font-family: Arial; 
    font-weight: bold; 
    } 

ul.pnav li a:hover {background-color: #111;} 

ul.pnav li.icon {display: none;} 

    @media screen and (max-width:680px) { 
    ul.pnav li:not(:first-child) {display: none;} 
    ul.pnav li.icon { 
    float: right; 
    display: inline-block; 
    } 
} 

    @media screen and (max-width:680px) { 
    ul.pnav.responsive {position: relative;} 
    ul.pnav.responsive li.icon { 
    position: absolute; 
     right: 0; 
    top: 0; 
    } 
    ul.pnav.responsive li { 
     float: none; 
     display: inline; 
     } 
    ul.pnav.responsive li a { 
    display: block; 
    text-align: left; 
    } 
    }   

私はコードとしてのhtmlでこれを持っている：

<ul class="pnav"> 
    <li><a href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
     <li><a href="#about">About</a></li> 
    <li class="icon"> 
     <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
    </li> 
    </ul> 

これは私がナビゲーションバーをアタッチするのdivクラスです。

<div class="fornavbar"></div> 

今後の進め方は分かりませんが、助けてください。このフィドルで

Answer 1

ルック：https://jsfiddle.net/8qepe4gw/2/

彼らは単に、このような共通のdiv（.container）の内部でそれらの両方を置く

<div class="container"> 
    <ul class="pnav"> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#news">News</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li><a href="#about">About</a></li> 
     <li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li> 
    </ul> 
    <div class="fornavbar"></div> 
</div> 

そして、割り当てるだけで一緒にあなたを揃えるようにするためには.containerの幅を指定すると、.pnavと.fornavbarの両方に100％の幅を与えることができるので、同じ幅の場合と同じように、コンテナの内側に引き伸ばされます。

は、今ではFirefoxのみで働いていた理由は、おそらくこのコードの一部である：@ -moz-文書はFirefoxのみを対象

@-moz-document url-prefix() { 
    ul.pnav { 
    top: 286px 
    } 
} 

ので。

新しいコードを追加しても、すべてのブラウザで機能するようになりましたが、心配する必要はなく、おそらくCSSコード（？）の部分を削除する必要があります。