有人介意看一下网站吗？地址为test.dvps.uk/index.html
我对汉堡菜单有问题，它在50%的栏中，我希望它正确对齐。我尝试过调整内容、浮动和不同的位置和显示，但似乎可以做到正确。我遇到的另一个问题是，当菜单切换时，它会展开，但会将内容向下推到下面的容器中，但我希望它也能移动容器。
我确信我对菜单的调整引起了这个问题，所以在我进一步打破它之前，你介意帮忙吗？谢谢：(
$(document).ready(function() {
$(".hamburger").click(function() {
$(".nav").slideToggle("slow");
});
});*,
*:before,
*:after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
border: none;
}
html {
box-sizing: border-box;
}
body {
font-family: "Arial";
font-size: 1.2em;
}
.container {
margin: 0 auto;
padding-top: 10px;
max-width: 1000px;
}
.container-bottom-pad {
margin: 0 auto;
padding-top: 10px;
max-width: 1000px;
padding-bottom: 80px;
}
.outerContainer {
background-color: #F1F1F1;
}
.row::before,
.row::after {
display: table;
content: " ";
clear: both;
}
.row {
padding: 10px 0;
}
.one,
.one-third,
.two-thirds,
.one-fourth {
width: 100%;
}
#headerAndNav {
background-color: rgba(135, 196, 66, 0.60);
margin-bottom: 10px;
}
header img {
z-index: -2;
position: absolute;
width: 20%;
margin: 0 auto;
}
.header-logo {
position: relative;
height: 100px;
width: auto;
}
.nav {
display: none;
padding: 0;
overflow: hidden;
/* Makes the sliding animation cleaner */
}
.nav-item {
list-style-type: none;
text-align: center;
background: #87c442;
display: block;
margin: 12px 0;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0px 6px #2c3e50;
}
.nav-link {
text-decoration: none;
color: #333;
}
.nav-item:active {
box-shadow: none;
transform: translate(0px, 6px);
transition: transform .20s;
}
.hamburger span {
display: block;
width: 35px;
height: 4px;
background: #625948;
margin: 5px 0px;
padding: 0;
}
.hamburger:hover span {
transition: background ease-in-out .25s;
background: #87c442;
}
.hamburger:hover {
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="headerAndNav">
<div class="row">
<header>
<div class="eleven-twelths column">
<nav>
<span class="flex-container">
<div class="align">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="signup.html">Signup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="successes.html">Successes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="prices.html">Prices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</span>
</nav>
</div>
<div class="one-twelth column">
<img alt="logo" class="header-logo" src="images/site/opaque-logo.png">
</div>
<!-- end of one-twelth-->
</div>
<!-- end of row -->
</header>
</div>
<!-- end of container -->好吧，如果你想要一个暴力解决方案，只需在CSS文件中这样做：
.hamburger { position:fixed; top: 25px; right: 30px; }
这将从文档流中取出汉堡包div，并且它将始终固定在给定的位置。
我看到其他一些问题即将出现，但仍在继续。
并从HTML中取出整个aligndiv。
查看您提到的地址(test.dvps.uk/index.html(并回答您的问题后：
1(">…汉堡菜单，它在50%的列中，我希望它正确对齐…">
它与类flex容器的div和类align的下一个div有关的问题(请注意，类align有两个定义：一个向右浮动，另一个向左浮动！(
2(。。。将内容向下推到下面的容器中，但我希望它也能移动容器
您可以在菜单后的容器中使用clear:right。
此外，您必须注意文件custom.css中的一些属性拼写错误(即bot而不是bottom(。看看这个。
我希望这能有所帮助。
Saludos！
1(正如其他人所指出的，对齐是由于flex容器造成的。添加：
justify-content: flex-end向右对齐。
2( 下拉内容的切换菜单是由于DOM被更改(可以将其视为从0px宽/高到100px宽/高的元素(。最简单的修复方法是将元素从DOM流中移除。一种方法是使用position。因此，举个例子：
position: absolute; right: 0; z-index: 1至ul.nav
你的汉堡现在应该是正确对齐的，汉堡内容不应该干扰/压低其他内容。