響應式橫幅 CSS/HTML

Question

我正在嘗試使我的標題/橫幅（最終將輸入到 SharePoint 母版頁）響應。 我為 header 設置了高度，通常如果我做出任何響應，我將高度設置為自動。

我正在使用 flex 將信息包含在橫幅中。 當我切換設備仿真並使 window 更小時，標題向右推並最終與右側的圖像一起隱藏。

我想這樣做，以便當視口縮小到足夠小時，所有標題都包含在手風琴的線條中，或者創建我自己的按鈕（下拉菜單），其樣式與手風琴相同。 我需要使用：之前還是：之后。

像這樣的東西（在小視口中包含所有標題/錨點）：

這是我的原始片段和小提琴：

 body { font-family: Arial, Helvetica, sans-serif; }.armylogo{ float: left; justify-content: center; height: 95%; bottom: 0; width: auto; vertical-align: baseline; }.armylogo2{ float: right; justify-content: center; height: 95%; bottom: 0; width: auto; vertical-align: baseline; }.navbar { overflow: hidden; background-color: #104723; height: 94px; width: 100%; text-align: right; float: left; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; vertical-align: center; }.dropdown { float: left; overflow: hidden; vertical-align: center; }.dropdown.dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }.navbar a:hover, .dropdown:hover.dropbtn { background-color: #104723; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover { background-color: #ddd; }.dropdown:hover.dropdown-content { display: block; }

 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="navbar"> <img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo"/> <a href="#home">Home</a> <a href="#news">News</a> <a href="#test1">Test 1</a> <a href="#test2">Test 2</a> <a href="#test3">Test 3</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo2"/> </div>

這是答案的更新版本（仍然不起作用）

 .navbar { /* overflow: hidden; */ /* not needed */ background-color: #104723; height: 94px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; /* possibly leave out to keep both logos visible for narrow views */ }.armylogo, .armylogo2 { height: 95%; /* bottom: 0; they should just sit in space */ padding: 0 2px; /* keep logo from touching edge */ width: auto; }.navbar a { font-size: 16px; color: #fff; /* use one type of color values */ padding: 14px 16px; text-decoration: none; } body { font-family: Arial, Helvetica, sans-serif; } @media only screen and (max-width: 600px) {.newDiv { width:50%; display:flex; flex-wrap:wrap; } }.navbar a { font-size: 16px; color: #fff; /* use one type of color values */ padding: 14px 16px; text-decoration: none; }.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; vertical-align: center; }.dropdown { float: left; overflow: hidden; vertical-align: center; }.dropdown.dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }.navbar a:hover, .dropdown:hover.dropbtn { background-color: #104723; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover { background-color: #ddd; }.dropdown:hover.dropdown-content { display: block; }

 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="navbar"> <img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo"/> <div class="newDiv"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#test1">Test 1</a> <a href="#test2">Test 2</a> <a href="#test3">Test 3</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> <img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo2"/> </div>

Answer 1

您可以將組件的這一部分包裝在一個 div 中，然后您可以在媒體查詢中將此屬性賦予該 div。

      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#test1">Test 1</a>
      <a href="#test2">Test 2</a>
      <a href="#test3">Test 3</a>
    
      <div class="dropdown">
        <button class="dropbtn">Dropdown 
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>

同樣對於您的 a 元素和.dropdown，您應該在媒體查詢中給出 width:%50 那么它們總共將是 3 行和 2 列。 當然，您也可以在媒體查詢中更改字體大小或其他功能。

@media only screen and (max-width: 600px) {
      .newDiv {
              width:100%;
              display:flex;
              flex-wrap:wrap;
          }
    }

  

Answer 2

同意@EvrenK 關於這種方法的看法。 關於::before和::after偽元素的一件事是您不能附加事件。 所以真正有樣式的按鈕將是最好的方法，也是最好的語義。

有點離題，但注意到有關您的樣本的一些一般情況。 一種可能有幫助的做法是將您的選擇器分組，而且您還有一些獎金聲明。 Flexbox 應該幾乎可以為您購買此導航所需的一切。 所以沒有float 。

CSS 往往有點冗長，去掉多余的東西通常會使它更具可讀性/不那么令人頭疼。

.navbar {
  /* overflow: hidden; */ /* not needed */
  background-color: #104723;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* possibly leave out to keep both logos visible for narrow views */
}

.armylogo,
.armylogo2 {
  height: 95%;
  /* bottom: 0;  they should just sit in space */
  padding: 0 2px; /* keep logo from touching edge */
  width: auto;
}

.navbar a {
  font-size: 16px;
  color: #fff; /* use one type of color values */
  padding: 14px 16px;
  text-decoration: none;
}