下拉菜单不会移动内容

debugcn 发表于 Dev

辩护

因此，基本上，当我使用下拉菜单将内容移动到下拉菜单下方时，我有点需要我的标题，因为它就在它上方，并且会有点碍事。

因此，我想问一下您对将其移到下拉菜单下方该怎么做的意见，因为它看起来不太像这样，而且不太合适

* {
  text-decoration: none;
  list-style: none;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'Quicksand', sans-serif;
}

.logo {
  float: left;
}

.nav {
  text-align: right;
  height: 100px;
  line-height: 100px;
  flex: 10;
}

.menu {
  margin: 0 30px 0 0;
  margin-top: 10px;
}

.menu a {
  clear: right;
  text-decoration: none;
  color: gray;
  margin: 0 10px;
  line-height: 70px;
  font-size: 20px;
  margin-top: 10px;
}

label {
  margin: 0 40px 0 0;
  font-size: 26px;
  line-height: 70px;
  display: none;
  width: 26px;
  float: right;
  margin-top: 10px;
}

#toggle {
  display: none;
}

.icons {
  display: flex;
  float: right;
}

h3,
h4,
h2 {
  font-family: 'Roboto', sans-serif;
}

section {
  text-align: center;
  align-items: center;
  align-self: center;
  align-content: center;
}

@media only screen and (max-width:820px) {
  .logo {
    width: 1%;
  }
  label {
    display: block;
    cursor: pointer;
    margin-top: 10px;
  }
  .menu {
    text-align: center;
    width: 100%;
    display: none;
  }
  .menu a {
    display: block;
    background-color: white;
    margin: 0;
  }
  #toggle:checked+.menu {
    display: block;
  }
  .icons {
    display: inline-block;
    width: 100%;
  }
}

@media only screen and (max-width:250px) {
  * {
    visibility: hidden;
  }
}

<!DOCTYPE html>
<html lang="cs">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="logo.png" />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <script src="https://kit.fontawesome.com/6b8781539d.js" crossorigin="anonymous"></script>

  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="./style.css">
  <title>Something</title>
</head>

<body>
  <header>
    <a class="logo" href="something"><img src="logo.png" alt="logo"></a>

    <div class="nav">

      <label for="toggle">&#9776;</label>
      <input type="checkbox" id="toggle">


      <div class="menu">
        <a href="something.html">Something</a>
        <a href="something.html">Something</a>
        <a href="something.html">Something</a>
        <a href="something.html">Something</a>
        <a href="something.html">Something</a>
        <div class="icons">
          <a href="https://www.facebook.com/something/"> <i class="fab fa-facebook"></i></a>
          <a href="tel:+somenumber"> <i class="fas fa-phone"></i></a>
          <a href="mailto:[email protected]"><i class="far fa-envelope"></i></a>
        </div>
      </div>
    </div>

  </header>
  <section class="Everything">
    <div class="Something">
      <a class="Something" href="./something.html">
        <h1>Something</h1>

        <p>
          Something, something, something...
        </p>
      </a>
    </div>
    <div class="Something">
      <a class="Something" href="./something.html">
        <h1>Something</h1>
        <p>Something, something, something...</p>
      </a>
    </div>
  </section>
</body>

</html>

Mhd Alaa Alhaj

你有一个固定height的.nav这对集装箱.menu所以每当你打开.menu，高度不会也改变.menu不会推内容，因为你已经声明

.nav { 
  height: 100px
}

解决方案是放置min-height而不是height，检查以下内容：

* {
    text-decoration: none;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Quicksand', sans-serif;
}

.logo {
    float: left;
}

.nav {
    text-align: right;
    min-height: 100px;
    line-height: 100px;
    flex: 10;
}

.menu {
    margin: 0 30px 0 0;
    margin-top: 10px;
}

.menu a {
    clear: right;
    text-decoration: none;
    color: gray;
    margin: 0 10px;
    line-height: 70px;
    font-size: 20px;
    margin-top: 10px;
}

label {
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 26px;
    float: right;
    margin-top: 10px;
}

#toggle {
    display: none;
}

.icons {
    display: flex;
    float: right;
}

h3,
h4,
h2 {
    font-family: 'Roboto', sans-serif;
}

section {
    text-align: center;
    align-items: center;
    align-self: center;
    align-content: center;
}

@media only screen and (max-width:820px) {
    .logo {
        width: 1%;
    }
    label {
        display: block;
        cursor: pointer;
        margin-top: 10px;
    }
    .menu {
        text-align: center;
        width: 100%;
        display: none;
    }
    .menu a {
        display: block;
        background-color: white;
        margin: 0;
    }
    #toggle:checked+.menu {
        display: block;
    }
    .icons {
        display: inline-block;
        width: 100%;
    }
}

@media only screen and (max-width:250px) {
    * {
        visibility: hidden;
    }
}

<!DOCTYPE html>
<html lang="cs">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="logo.png" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <script src="https://kit.fontawesome.com/6b8781539d.js" crossorigin="anonymous"></script>

    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./style.css">
    <title>Something</title>
</head>

<body>
    <header>
        <a class="logo" href="something"><img src="logo.png" alt="logo"></a>

        <div class="nav">

            <label for="toggle">&#9776;</label>
            <input type="checkbox" id="toggle">


            <div class="menu">
                <a href="something.html">Something</a>
                <a href="something.html">Something</a>
                <a href="something.html">Something</a>
                <a href="something.html">Something</a>
                <a href="something.html">Something</a>
                <div class="icons">
                    <a href="https://www.facebook.com/something/"> <i class="fab fa-facebook"></i></a>
                    <a href="tel:+somenumber"> <i class="fas fa-phone"></i></a>
                    <a href="mailto:[email protected]"><i class="far fa-envelope"></i></a>
                </div>
            </div>
        </div>

    </header>
    <section class="Everything">
        <div class="Something">
            <a class="Something" href="./something.html">
                <h1>Something</h1>

                <p>
                    Something, something, something...
                </p>
            </a>
        </div>
        <div class="Something">
            <a class="Something" href="./something.html">
                <h1>Something</h1>
                <p>Something, something, something...</p>
            </a>
        </div>
    </section>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。