html - 固定宽度溢出容器

Question

我的网站容器的宽度为 95%。我正在尝试创建一个跨越整个容器宽度的导航。在我添加'位置：固定;'之前它工作正常 到导航，然后它只是忽略容器并溢出容器。

下面是我的 CSS 代码和图片链接。

#page {
width: 95%;
max-width: 1440px;
height: auto;
margin-left: auto;
margin-right: auto;
border: solid 1px #000;
}

.nav {
width: 100%;
background-color: fuchsia;
height: 50px;
    position: fixed;
}

.nav ul {
list-style: none;

}

.nav ul li {
float: left;
display: block;
padding: 5px;
background-color: fuchsia;
line-height: 40px;
}

问题图片... http://i.imgur.com/pZEbe.png

谢谢你的帮助！非常感谢！

Answer 1

您正在提供position:fixed的内容使您的导航脱离父 div 或元素。

在导航元素中添加如下内容：

.nav 
{
  width:95%;      /*dont give width as 100% */
  margin:0 auto;  /* for center alignment purpose */
  background-color: fuchsia;
  height: 50px;      
  position: fixed;
}