获得左边距并且无法弄清楚为什么

Question

我正在创建移动下拉菜单，但出于某种原因，我的导航列表没有占据整个 width:100%; 页面。是的，但是我在下拉菜单旁边得到了某种左边距。我试过设置 margin-left: 0;，但这没有帮助。我什至看不到我设置的边距在哪里。我也试过设置 padding-left: 0;。没有任何效果。

请在 640px 以下的视口中查看。有人看到我做错了什么吗？

 $('span.nav-btn').click(function () {
  $('ul.nav-list').slideToggle(500);
 })
 $(window).resize(function (){
  if ( $(window).width() > 600 ) {
   $('ul.nav-list').removeAttr('style');
  }
 });

html ,body {
 margin: 0;
 height: 100%;
 font-family: "Droid Sans", sans-serif;
}

.header {
 width: 100%;
 height: 100px;
 background-color: #191919;
}
.header_wrap {
 margin: auto 10%;
}
.logo {
 float: left;
 padding: 25px 0;
 font-size: 2.2em;
}
.logo a {
 text-decoration: none;
 color: #FFF;
}
.nav-list {
 text-decoration: none;
 float: right;
 list-style: none;
 z-index: 99999;
}
/*.nav-list li {
 text-decoration: none;
 display: inline-block;
 padding: 35px 20px;
 color: #FFF;
}*/
.nav-list > a {
 display: inline-block;
 padding: 35px 20px;
 text-decoration: none;
}
.nav-list > a > li {
 text-decoration: none;
 font-size: 1.2em;
 color: #FFF;
}

@media screen and (max-width:640px) {

.logo {
 padding: 8px 0;
 font-size: 1.3em;
}
.header_wrap {
 margin: 0 5%;
}
.nav-list {
 padding: 0;
 text-align: center;
 display: none;
 top: 100px;
 width: 100%;
 z-index: 999999999;
 position: absolute;
}
.nav-list > a {
 display: block;
 border-bottom: 1px solid #FFF;
 width: 100%;
 background-color: rgba(0, 0, 0, 0.7);
}
.nav-btn {
 display: block;
 text-align: right;
 cursor: pointer;
 padding-top: 20px;
}
.nav-btn:before {
 background-image: url('http://greekgodmythology.com/icons/white-menu.png');
 background-size: 28px 28px;
 background-repeat: no-repeat;
 width: 28px;
 height: 28px;
 content:"";
 display: block;
 float: right;
}

 <header class="header">
  <div class="header_wrap">
   <div class="logo"><a href="">ABC</a></div>
    <span class="nav-btn"></span>
    <ul class="nav-list">
     <a href="#"><li>A</li></a>
     <a href="#"><li>B</li></a>
     <a href="#"><li>C</li></a>
    </ul>
  </div>
 </header>

Answer 1

这是添加边距的规则。

@media screen and (max-width:640px) {

    .header_wrap {
        margin: 0 5%;
    }

}

您正在将 top/bottom 边距设置为 0，将 left/right 边距设置为 5%。此元素包含您的下拉列表，因此尊重 .header_wrap.

的父元素的边距

设置为margin: 0;。尽管这可能会扰乱菜单中其他元素的对齐方式。但这就是利润率的来源。

一个解决方案是不要将导航放置在 .header_wrap 内。

<header class="header">

    <div class="header_wrap">
        <div class="logo">
            <a href="">ABC</a>
        </div>
        <span class="nav-btn"></span>        
    </div>

    <ul class="nav-list">
        <a href="#"><li>A</li></a>
        <a href="#"><li>B</li></a>
        <a href="#"><li>C</li></a>
    </ul>

</header>

获得左边距并且无法弄清楚为什么

Getting a left margin and cannot figure out why

html

css

margin

drop-down-menu