如何为移动设备添加响应按钮？按钮需要堆叠成一列。有困难

Question

我的内容需要对所有屏幕尺寸做出响应，我快做到了。按钮需要堆叠成一个整齐的列，但有些东西阻止了这种情况的发生。请帮助提供有关如何解决此问题的想法。看看到目前为止的工作。在此先感谢，我感谢有关此主题的任何帮助。此致

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>New Layout for CW work</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="menu-buttons.css">
  <link rel="stylesheet" href="dropdown-menu.css">

  <style>
    /*Conent menu buttons*/
    
    section {
      background-color: #ede6c1;
      padding: 15px;
      text-align: center;
    }
    
    article {
      padding: 10px;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    
    .row {
      display: -ms-flexbox;
      /* IE10 */
      display: flex;
      justify-content: center;
    }
    
    .column {
      -ms-flex: 50%;
      /* IE10 */
      flex: 0 1 auto;
      margin: 30px;
    }
    
    .menu-button {
      display: block;
      box-sizing: border-box;
      background-color: rgba(85, 100, 83, 0.8);
      padding: 20px 0;
      font-size: 30px;
      margin: 10px 0;
      width: 200px;
      border-radius: 25px;
      box-shadow: 5px 5px 5px rgba(71, 69, 69, 0.787);
    }
    
    .menu-button:hover {
      box-shadow: 1px 1px 1px rgba(71, 69, 69, 0.787);
      color: black;
    }
    
    a {
      color: black;
      text-decoration: none;
    }
    
    a:hover {
      color: rgba(71, 69, 69, 0.787);
      text-decoration: none;
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      margin: 1em;
      font: 1.2em/1.3em 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Roboto-Light', 'Roboto Light', 'Roboto', 'Segoe UI Web Light', 'Segoe UI Light', 'Segoe UI Web Regular', 'Segoe UI', Helvetica, Arial, sans-serif;
      color: #fff;
    }
    
    h1 {
      font-weight: normal;
      text-align: center;
    }
    
    p {
      margin: 0 0 1em 0;
    }
    
    #main {
      margin: 0;
      padding: 0;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row;
      flex-flow: row;
    }
    
    header,
    footer,
    #main>article,
    #main>nav,
    #main>aside {
      margin: 4px;
      padding: 1em;
    }
    
    #main>article {
      background: #996;
      -webkit-flex: 4 1 0;
      flex: 4 1 0;
      -webkit-order: 2;
      order: 2;
    }
    
    #main>nav,
    #main>aside {
      background: #663;
      -webkit-flex: 1 6 0;
      flex: 1 6 0;
    }
    
    #main>nav {
      -webkit-order: 1;
      order: 1;
    }
    
    #main>aside {
      -webkit-order: 3;
      order: 3;
    }
    
    header,
    footer {
      min-height: 80px;
    }
    
    header {
      background: #633;
      display: flex;
    }
    /*Header top*/
    
    .header {
      overflow: hidden;
      background-color: #f1f1f1;
      padding: 10px 10px;
    }
    
    .header a {
      float: left;
      color: black;
      text-align: center;
      padding: 12px;
      text-decoration: none;
      font-size: 18px;
      line-height: 25px;
      border-radius: 4px;
    }
    
    .header a.logo {
      font-size: 25px;
      font-weight: bold;
      display: flex;
      justify-content: center;
    }
    
    .header a:hover {
      background-color: #ddd;
      color: black;
    }
    
    .header a.active {
      background-color: dodgerblue;
      color: white;
    }
    
    .header-right {
      float: right;
    }
    
    @media screen and (max-width: 500px) {
      .header a {
        float: none;
        display: block;
        text-align: left;
        padding: 5px;
      }
      .header-right {
        float: none;
      }
    }
    /*   Back button CSS*/
    
    .button {
      display: inline-block;
      border: none;
      padding: 1rem 2rem;
      margin-right: 20px;
      border-radius: 4px;
      text-decoration: none;
      background: dodgerblue;
      color: #ffffff;
      font-family: sans-serif;
      font-size: 1rem;
      cursor: pointer;
      text-align: center;
      transition: background 250ms ease-in-out, transform 150ms ease;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
    
    .button:hover,
    .button:focus {
      background: #434344;
    }
    
    .button:focus {
      outline: 1px solid #fff;
      outline-offset: -4px;
    }
    
    .button:active {
      transform: scale(0.99);
    }
    /*  back button CSS end*/
    /*header bottom*/
    
    footer {
      background: #c66;
    }
    /* Too narrow to support three columns */
    
    @media all and (max-width: 640px) {
      #main, #page {
        -webkit-flex-flow: column;
        flex-flow: column;
      }
      #main>article,
      #main>nav,
      #main>aside,
      #main>.row,
      #main.article {
        /* Return them to document order */
        -webkit-order: 0;
        order: 0;
      }
      #main>nav,
      #main>aside,
      header,
      footer,
      button,
      #main>.article,
      .row {
        min-height: 50px;
      }
    }
    
    @media all and (max-width: 800px) {
      #main>.row, #main.article {
        /* Return them to document order */
        -webkit-order: 0;
        order: 0;
        display: flex;
        flex-direction: column;
      }
    }
  </style>

</head>



<body>

  <div class="header">
    <a href="" class="logo"><img src="images/cw_logo.png"> </a>
    <div class="header-right">
      <a class="active" href="#home">Home</a>
      <a href="email@emailyou.com">email@emailyou.com</a>
      <a href="#about">
        <p>1234567890</p>
      </a>
      <button class="button" onclick="goBack()">Go Back</button>
    </div>
  </div>


  <!-- Drop down menu content-->
  <div class="header-dropdown-menu">

    <ul class="top-nav">
      <li class="top-menu-nav"><a href="#">Menu</a>
        <ul class="sub-nav">
          <li><a href="#">wood Type</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Specification</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Images</a></li>
          <li><a href="#">FAQ</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <div id="main">
    <nav>image in here</nav>
    <aside>image in here</aside>


    <article>

      <div class="row">
        <div class="column">

          <a class="menu-button" href="../Wood-Type/woodtype.html" role="button">Wood
                  type</a>


          <a class="menu-button" href="../Wood-Type/.html" role="button">Specification</a>

          <a class="menu-button" href="../Wood-Type/.html" role="button">Pricing</a>

        </div>

        <div class="column">
          <a class="menu-button" href="../news/news.html" role="button">News</a>


          <a class="menu-button" href="../Wood-Type/.html" role="button">FAQ</a>

          <a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button">Images</a>

        </div>
      </div>
    </article>


  </div>
  <footer>
    Footer
  </footer>
  <!-- partial -->

</body>

</html>

Answer 1

我看到你的问题所以我回答了你的问题。

所以我只是给出了时尚下拉列表和按钮的代码。

html代码

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="#">wood type</a>
  <a href="#">news</a>
  <a href="#">specification</a>
    <a href="#">pricing</a>
    <a href="#">images</a>
    <a href="#">faqs</a>
  </div>
</div>

和css

.dropdown {
  position: relative;
  display: inline;

}

    .dropbtn {
  background-color: yellow;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
      width: 17.82%;
      margin: 0px 4px;
}

    .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 620px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

    .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: inline;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: inline;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

Answer 2

似乎需要@media all 才能允许使用此 CSS 对按钮进行响应操作。

 @media all and (max-width: 800px) {
     #main>.row,
     #main.article {
         /* Return them to document order */
         -webkit-order: 0;
         order: 0;
         display: flex;
     }
 }

如何为移动设备添加响应按钮？按钮需要堆叠成一列。有困难

how to add responsive buttons for mobile? buttons needs to stack into a column. Having difficulty

html

css

screen-size

device-width

responsive