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 無需選擇它。

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