Question

当我激活菜单栏时，全身被推下。

此外，其中一个链接没有被推到其他链接，但与徽标对齐。

你如何解决这两件事？

我无法通过小提琴来让您更轻松。这是反正链接，但菜单栏不起作用。也许会的为你工作。

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

body {margin:0;}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.home{
	float:left;
     display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}

<div class="topnav" id="myTopnav">
<a style="float:left" href="#home">Home</a>
 <a href="#contact">Contact</a>
<a href="#news">News</a>
  <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<p>
Minimize the width to get the menu bar. Click on the menu bar, and watch this being pushed down by that nasty navbar. How do you fix that and the misalignment of the logo and one of the links. 
</p>

Answer 1

将此css添加到您的菜单中：

{
position : absolute;
top : 0;
}

Answer 2

在小屏幕中为链接

添加!important后，只需添加float:none;即可

原因：主页链接保持向左浮动，以便下一个链接将自动移动到它旁边

@media screen and (max-width: 600px) {
  ...

  .topnav.responsive a {
    float: none!important;
    display: block;
    text-align: left;
  }

}

对于内容，您需要在菜单上使用position:absolute;使其与内容重叠，并将margin-top添加到内容<p>或padding-top到正文以显示就在菜单栏之后

见下面的结果：

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

body {
  margin: 0;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.home {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav {
    position: absolute;
    width: 100%;
    top: 0;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none!important;
    display: block;
    text-align: left;
  }
  .content {
    margin-top: 60px
  }
}

<div class="topnav" id="myTopnav">
  <a style="float:left" href="#home">Home</a>
  <a href="#contact">Contact</a>
  <a href="#news">News</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<p class="content">
  Minimize the width to get the menu bar. Click on the menu bar, and watch this being pushed down by that nasty navbar. How do you fix that and the misalignment of the logo and one of the links.
</p>

菜单栏向下推动主体，链接未正确对齐

2 个答案: