我正在尝试制作水平导航栏,现在我的div导航栏没有使用max {width:1200px,这是在<body>
上设置的,所以我的无序列表没有浮动到屏幕右侧。添加宽度:100%或继承到导航没有帮助,宽度100%超过我的最大宽度。
body {
margin: 0 auto;
max-width: 1200px;
font-family: Helvetica, Arial;
background-color: #F7F7F7;
}
#wrapper {
position: relative;
z-index: 0;
margin: 1% 4% 2%;
padding: 1rem;
}
#navigation {
position: fixed;
}
#navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navigation li {
float: right;
}
&#13;
<div id="wrapper">
<div id="navigation">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Projects</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
</div>
&#13;
答案 0 :(得分:0)
我将最大宽度移动到#navigation元素,并将其设置为100%宽度。 我还将你的填充向下移动到你的ul元素。
这里有更新的fiddle。
#navigation {
position: fixed;
max-width:1200px;
width:100%;
border: 1px solid red;
}
#navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
padding: 1rem;
}
我认为固定位置可能会使div忽略父元素max-width