CSS 定位/尺寸

Question

我在我的 css 中使用 @media all 和 (max-width: 600px) {} 作为响应式菜单，问题是它没有正确显示。

我想让橙色填充绿色空间……当然，还要将绿色空间变成透明的。基本上这只是一个尺寸/位置问题。

CSS:

@media all and (max-width: 600px) {

  .example-header .container { 
     width: auto; 
     height:auto; 
     margin:0 auto;
     padding:auto;
  }
  /*Zwarte  MENU balk */
  a.menu-link { 
     display: block; 
     color: #fff; 
     background-color: #333;  
     text-decoration: none; 
     padding: 19px 10px; 
     width:auto; 
     height:auto; 
     margin:0 auto;
     padding:auto;
     margin-bottom:2em;
  }
  .menu { 
     border-top: 10px solid #333;
     border-bottom:10px solid #333;     
     height:13.2em; 
     margin:0 auto;
     padding:auto;
     width:100%;
     background-color:blue;
  }  
  .menu ul { 
     width:auto; 
     height:auto;  
     margin:0 auto;
     padding:auto;
  }
  .menu > ul { 
     height:auto;   
     margin-top:; 
     background-color:TRANSPARANT;
  }
  .menu li, .menu > ul > li { 
     width:100%;
     height:auto; 
     margin:0 auto;
     padding:0px;
     background-color:green;
  }  
  .menu li a { 
     color: #000;
     display: inline; 
     border-bottom: 1px solid #333; 
     position: relative; 
     height:auto; 
     margin:0 auto;
     padding:auto;
     background-color:orange;
  }
}

Answer 1

这看起来像是一个与填充相关的问题，请尝试将其设置为 0 而不是 .menu ul 的 auto。不过 HTML 会有所帮助。