【发布时间】：2019-06-21 01:14:48
【问题描述】：
因此，从我上次的论坛跟进，我能够让我的响应式菜单导航栏正常工作。以及我想如何使用很多人推荐的 flex 将我的两个项目居中。
我更新了我的导航栏，因为它在菜单栏中没有标题，所以没问题。现在发生的事情是，当我打开它时，它会弹出一个下拉菜单，但我的项目不在导航下方的中心和。为什么它会像“浮动”到页面右侧无法看到和切断（尤其是在 iPhone 模式下查看时）。看看我下面的截图和我的代码，看看有什么困扰着我。
当汉堡图标未被点击时
点击汉堡图标时
这是我的代码。运行代码 sn-p 或更好，将其复制并粘贴到您的文本编辑器中，然后从浏览器运行它，这样您就可以看到我在说什么。 注意：当您运行代码 sn-p 时，它会执行我想要执行的操作，但来自我的文本编辑器和浏览器，它并没有执行我想要执行的操作。
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>【问题讨论】：
-
很难理解你的意思，或者我的英语很差:(
-
(1) 打开导航 (2) 菜单下拉 (3) 项目不在菜单中心和下方
-
@Cuong Hoang 这就是我想要我的物品的地方 ---> i.imgur.com/eySnLM8.jpg
-
我似乎无法重现这一点。我在 JSFiddle 中尝试过，但它似乎工作正常：jsfiddle.net/duvLtsrf
-
问题是您在
main.css的第 242 行有第二个.responsive课程。在其中，您将宽度指定为 24.99%。这将覆盖您之前声明的同名类。删除它，它应该可以工作。
标签： html css drop-down-menu responsive-design flexbox