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

Question

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

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

	$('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%;
    }

}

您将上/下边距设置为 0，将左/右边距设置为 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>