固定宽度溢出容器

时间:2012-10-29 02:40:21

标签: css html5 css3 fixed

我的网站容器宽度为95%。我正在尝试创建一个横跨我的容器的整个宽度的导航。它工作正常,直到我添加'position:fixed;'在导航中,它只是忽略容器并溢出容器外。

下面是我的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

感谢您的帮助!非常感谢!

1 个答案:

答案 0 :(得分:0)

您正在使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;
}