css display:block 属性错误或行为不同

Question

我想使用 flexbox 和块（在小屏幕设备中）制作响应式导航栏。在这里，我在大屏幕上将 display:flex 应用到 navbar_items 以单行显示它们。但是我想在移动视图中将 navbar_items 显示为块元素，但在我的媒体查询中，我选择了 navbar_items 和 menu_active 但它没有将我显示为 flex。它仍然显示我是 flex。我希望它对你有意义，如果不清楚请在下面评论或以可以理解的方式为其他人编辑问题。

.navbar {
  height: 10vh;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: black;
}

.navbar_logo a {
  text-decoration: none;
  font-size: 35px;
  color: white;
}

.navbar_item {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.nav_link {
  list-style: none;
  padding: 20px;
}

.nav_link a {
  font-size: 16px;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
}

@media(max-width:798px) {
  .navbar {
    display: block;
  }
  .navbar_item .menu_active {
    display: block;
  }
}

<nav class="navbar">
  <div class="navbar_logo">
    <a href="./index.html">Inspire 2020</a>
  </div>
  <ul class="navbar_item menu_active">
    <li class="nav_link"><a href="#" class="active">Home</a></li>
    <li class="nav_link"><a href="#">Events</a></li>
    <li class="nav_link"><a href="#">Schedule</a></li>
    <li class="nav_link"><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 1

从 .navbar_item 中删除 .menu_active，无需 select。

 @media(max-width:798px)
    {
      .navbar li
      {
        display: block;
        color: blue;
      }
      .navbar_item
      {
        display: block ;
      }
    }

css display:block 属性错误或行为不同

css display:block property error or behaving differently

html

javascript

css

nav

css display:block 属性 错误或行为不同

css display:block property error or behaving differently

html

javascript

css

nav

css display:block 属性错误或行为不同