Question

I've been going through problems in positioning navbar even after the fact that its responsive. Problem comes when zooming in and zooming out (except for Mozilla), and I got no choices than asking experts for a solution because I am a noob in coding.

Chrome zoom-out: https://s31.postimg.org/kjnbou0yj/zoom_out_chrome.png

Mozilla zoom-out (also perfect in zoom-in): https://s31.postimg.org/ud3lz1i3v/zoom_out_moz.png

Basically, I want to join my navbar with another div element so that it do not move from its position and I don't know how to use :target etc, and do not even know if target will solve my problem.

My need: I just need my navbar to stick to one size. With current settings, it is working PERFECTLY with MOZILLA ONLY. I don't know why it show blank space in chrome and other browsers when zoom-out and when zoom-in. Working fine with Chrome 100% zoom and working fine with Opera 100% zoom. The problem comes when zooming in or zooming out. Again, it is working perfectly for mozilla in zooming etc, no such problems with mozilla. And my navbar is responsive too.

My guess: I think that attaching this navbar with hidden div class could solve this problem. BUT I am a complete noob in coding and I can just guess.

Here is the code of my navbar:

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;
   }
  }

I have this in html as a code:

    <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>

This is div class to which I want to attach navbar.

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

I don't know how to proceed further, please help.

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-document url-prefix() {
   ul.pnav {
   top: 286px
  }  
}

因为@ -moz-document只针对firefox。

现在它仍然适用于所有浏览器，虽然我在小提琴中添加了新代码，所以你不必担心它，甚至可能删除那部分CSS代码（？）。

How to target another element to join with another positioned element?

1 个答案: