Question

我创建了一个移动菜单，出于某种原因，无论何时展开菜单，列表项都会向右移动一点而border-bottom不会覆盖展开菜单的整个宽度。

要查看菜单的移动部分，请将屏幕缩小一些。单击菜单图标后，您将看到列表不是直接向下，它看起来向右移动。然后边界问题很容易看到。

请参阅代码段以查看问题。

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

body {
		padding: 0;
		margin: 0;
		font-family: 
	}
	.header {
		margin: 0;
		background-color: #333;
		height: 80px;
	}
	.header_wrap {
		margin: 0 15%;
	}
	.logo {
		color: #FFF;
		font-size: 1.2em;
		padding-top: 25px;
		position: absolute;
	}
	.nav_list {
		text-decoration: none;
		background-color: #333;
		color: #FFF;
		margin: 0;
		list-style: none;
		text-align: right;
	}
	.nav_list > li {
		display: inline-block;
		padding: 25px 15px;
	}
	.nav_list > li > a {
		text-decoration: none;
		font-size: 1.2em;
		color: #FFF;
	}
	
	@media screen and (max-width:640px) {
		body {
			background-color: blue;
		}
		.header_wrap {
			margin: 0 5%;
		}
		.nav_list {
			text-align: center;
			display: none;
			margin-top: 60px;
		}
		.nav_list > li {
			display: block;
			border-bottom: 1px solid #FFF;
		}
		.nav-btn {
			display: block;
			background-color: #333;
			color: #FFF;
			font-size: 1.5em;
			text-align: right;
			cursor: pointer;
			padding-top: 20px;
		}
		.nav-btn:before {
			background-image: url('http://realtorcatch.com/icons/mobile_menu_bttn.png');
			background-size: 28px 28px;
			background-repeat: no-repeat;
			width: 28px;
			height: 28px;
			content:"";
			display: block;
			float: right;
		}
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
	<header class="header">
		<div class="header_wrap">
			<div class="logo">Garbrandt Construction</div>
			<nav>
				<span class="nav-btn"></span>
				<ul class="nav_list">
					<li><a href="#">Services</a></li>
					<li><a href="#">About us</a></li>
					<li><a href="#">Pricing</a></li>
					<li><a href="#">Gallery</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</div>
	</header>
</body>

Answer 1

您应该在ul元素中添加0的填充。填充：0或填充左：0应该这样做。

.nav_list {
  padding: 0;
}

列表自动在左侧填充;

Answer 2

尝试将最后一行添加到nav_list（padding-left：0是必需的）：

.nav_list {
        text-align: center;
        display: none;
        margin-top: 60px;
  padding-left:0;
    }

JS Fiddle

slideToggle（）

2 个答案: