Question

我正在建立一个网站，但是<a>标签在@media中不起作用（最大宽度：800px;）。
但是相同的<a>标签可以正常大小使用，也可以不使用@media（max-width：800px;）

有些时候它可以与@media一起使用，但是延迟却像1s一样，但并非每次都如此。这是非常简单的HTML和CSS。

注意：我在CSS中使用过渡

Header.php

.nav613>.nav-links {
  display: inline;
  font-size: 18px;
}

.nav613>.nav-links>a.nav_item {
  display: inline-block;
  padding: 03px 20px 03px 20px;
  text-decoration: none;
  color: #000;
  border-radius: 0px;
}

.nav613>.nav-links>a.nav_item:hover {
  cursor: pointer;
}

@media (max-width:800px) {
  .nav613>.nav-links {
    display: block;
    width: 100%;
    background-color: #efefef;
    height: 0px;
    transition: all 0.7s ease-in;
    overflow-y: hidden;
    top: 70px;
    left: 0px;
  }
  .nav613>.nav-links .tool_main_nav_butt {
    display: none;
  }
  .nav613>.nav-links>a.nav_item {
    display: block;
    text-align: center;
    padding: 15px;
    width: 100%;
  }
  .nav613>#nav-check:not(:checked)~.nav-links {
    height: 0px;
  }
  .nav613>#nav-check:checked~.nav-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
}

<!-- ?php $root_address = "/adodot"; ? -->
<header>
  <div class="nav613">
    <input type="checkbox" id="nav-check">
    <div class="nav-header">
      <div class="nav-title">
        AToolsTower
      </div>
    </div>
    <div class="nav-btn">
      <label for="nav-check">
            <span></span>
            <span></span>
            <span></span>
          </label>
    </div>

    <div class="nav-links">
      <a class="nav_item animated fadeIn" href="/adodot/">Home</a>
      <a class="nav_item animated fadeIn" href="/adodot/pages/contract.php">Contract</a>
      <a class="nav_item animated fadeIn" href="/adodot/pages/about.php">About</a>
      <a class="nav_item animated fadeIn" href="/adodot/blog/index.php">Blog</a>
      <a class="tool_main_nav_butt animated fadeIn glow-button" href="/adodot/tools/index.php">TOOLS</a>
    </div>
    <a class="tool_main_nav_butt_mobile animated fadeIn" href="/adodottools/index.php">TOOLS</a>

  </div>
</header>

注意：请勿删除@media（最大宽度：800px;）

为什么<a>标记在@media（）中不起作用{}

0 个答案: