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

这是添加保证金的规则。

<Style TargetType="Button" BasedOn="{StaticResource {x:Type Control}}" x:Key="OnButton">
   <Setter Property="Background" Value="{StaticResource GradientBrushOn}"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="Padding" Value="2"/>
   <Setter Property="HorizontalContentAlignment" Value="Center"/>
   <Setter Property="VerticalContentAlignment" Value="Center"/>
   <Setter Property="Template">
       <Setter.Value>
           <ControlTemplate TargetType="Button">
               <Border CornerRadius="15" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Padding="{TemplateBinding Padding}">
                   <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
               </Border>
           </ControlTemplate>
       </Setter.Value>
   </Setter>
</Style>

您要将上/下边距设为@media screen and (max-width:640px) { .header_wrap { margin: 0 5%; } }，将左/右边距设为0。此元素包含您的下拉列表，因此尊重5%的父元素的边距。

将其设为.header_wrap。虽然这可能会使菜单中其他元素的对齐变得混乱。但这就是利润的来源。

一种解决方案是不将导航放在margin: 0;内。

.header_wrap

获得左边距并且无法弄清楚原因

1 个答案: