css - 菜单不会全屏显示

问题描述

我已经为我的页面制作了一个子菜单，现在我希望它全屏显示，我该怎么做？我用过width: 100%，但它不起作用。如何获得全宽？设置为padding/margin似乎0也不起作用

 body{
        font-family: 'Archivo', sans-serif;
    }
    
    .dropbtn {
        background-color: yellow;
        color: white;
        font-size: 16px;
        border: none;
        width: 100%;
      }
      
      .dropdown {
        position: relative;
        display: inline-block;
      }
      
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        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: block;
      }
      
      .dropdown-content a:hover {background-color: #ddd;}
      
      .dropdown:hover .dropdown-content {display: block;}
      
      .dropdown:hover .dropbtn {background-color: yellow;}
    
      div {
        width: 35px;
        height: 5px;
        background-color: white;
        margin: 6px 0;
      }

    <!DOCTYPE html>
    <head>
       <title>Rwebsite</title>
       <link rel="stylesheet" type="text/css" href="website.css">
       <link rel="preconnect" href="https://fonts.gstatic.com">
       <link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
       <meta name="vieuwport" content="width=device-width.initial-scale=1">
    </head>
    <body>
        
        <div class="dropdown">
          <button class="dropbtn">
            <div></div>
            <div></div>
            <div></div>
          </button>
          <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </div>
    
        
     </body>
    </html>

divs我用来制作“菜单图标”的东西是空的。

标签： css

css - 菜单不会全屏显示

问题描述

解决方案

推荐阅读