Question

因此，在我上一个论坛中进行了跟进，使我的响应式菜单导航栏能够正常工作。以及我想如何使用很多人推荐的flex来集中我的两个项目。

我更新了我的导航栏，因为它在菜单栏中没有标题，所以可以了。现在发生的事情是当我打开它时，它会弹出一个下拉菜单，但是我的项目不在导航栏的和中。为什么它会像它“漂浮”在页面右侧那样无法看到并被剪切掉（特别是在iPhone模式下查看时）。看看下面的屏幕截图和代码，看看是什么困扰着我。

未点击汉堡图标

点击汉堡图标

这是我的密码。运行代码片段或更好的代码片段，将其复制并粘贴到您的文本编辑器中，然后从浏览器运行它，这样您就可以了解我在说什么。 注意：运行该代码段时，我想要执行的操作来自我的文本编辑器和浏览器，但它没有执行我想要的操作。

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

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  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;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.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 a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}

.summary {
  min-height: 75vh;
  max-width: 2000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profilePicture {
  padding: 2rem;
}

.profileSummary {
  max-width: 400px;
}

@media screen and (max-width: 800px) {
  .summary {
    flex-direction: column;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="main.css">
  <script src="script.js"></script>
</head>

<body>

  <!-- The navigation menu -->

  <div class="topnav" id="myTopnav">
    <a href="home.html" class="active">Home</a>
    <a href="about.html">About Me</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="contact.html">Contact</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>



  <div class="summary">
    <div class="profilePicture">
      <img src="https://ih1.redbubble.net/image.464384650.8618/flat,550x550,075,f.jpg" style="width: 170px; height: 170px; border-radius:50%;">
    </div>
    <div class="profileSummary">
      Attentive alas because yikes due shameful ouch much kookaburra cantankerously up unbridled far vulnerably climbed aristocratically hired brusque fox said the therefore terrier scallop innocent on goodness mongoose woolly showed insistently and.
    </div>
  </div>

</body>

</html>

Answer 1

此用户最初发布的代码和标记片段实际上按预期工作。经过进一步调查，问题在于用户拥有另一个（重复的）CSS类，该类将覆盖其先前的CSS。

第一堂课在媒体查询中，它本身就起作用了：

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}

这个类在它的下面：

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

当屏幕宽度<= 600 px时，将responsive类应用于导航栏，并显示汉堡菜单图标。但是第二个responsive类将展开的菜单的宽度限制为容器的25％，这导致了不希望的定位。

通常存在这样的问题，通常最好使用浏览器中的开发人员工具来查看将CSS规则应用于有问题的元素。您可以了解有关developer tools here的更多信息。

导航栏下方和下方的项目-响应式顶部导航

1 个答案: