Question

有人介意浏览一个网站吗？地址是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 -->

Answer 1

好吧，如果您想要蛮力解决方案，只需在CSS文件中执行此操作即可：

.hamburger { position:fixed; top: 25px; right: 30px; }

这会将汉堡包div从文档流中移出，并且将始终粘贴到给定位置。

我看到其他一些问题即将出现，但请继续。

然后从HTML中取出整个align div。

Answer 2

查看地址后，您提到（test.dvps.uk/index.html）并回答您的问题：

1）“ ...汉堡菜单，它在50％的列中，我希望它正确对齐... ”

与 flex-container 类的div和与 align 的下一个div有关的问题（请注意，您对类 align 有两个定义：一个向右浮动，另一个向左浮动！）

2） ...将内容拖入下面的容器中，但我也希望它也将容器移动...

您可以在菜单后的容器中尝试 clear：right 。

此外，您还必须注意文件 custom.css 中的某些属性拼写错误（即 bot 代替 bottom ）。也可以检查一下。

我希望有帮助。

礼炮！

Answer 3

1）如其他人所述，对齐是由于flex容器引起的。添加：

justify-content: flex-end右对齐。

2）向下切换内容的切换菜单归因于DOM的更改（将其视为从0px宽度/高度到100px宽度/高度的元素）。最简单的解决方法是将元素移出DOM流。一种方法是使用position。举个例子：

position: absolute; right: 0; z-index: 1至ul.nav

您的汉堡包现在应该正确对齐，并且汉堡包内容不应干扰/压低其他内容。

HTML CSS Javascript汉堡菜单问题

3 个答案: