固定寬度溢出容器

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; 
}