CSS-HTML-Resize屏幕

我在基本網站上學習瞭解編碼。我不明白的是這個。

在CSS我有一個容器：寬度80％裏面我有一個標題：高度270px 在標題裏面我有一個菜單。高度：65px

我沒有設置標題和菜單的寬度，因爲從容器的寬度是80％這是好的想法？或不？

嗯，它的作品，但。什麼不工作是這樣的.. 我想要菜單固定，因爲當我滾動我想我的菜單與我一起去。

position：fixed; - 我的菜單較短？爲什麼？當我設定79％的寬度時，我會糾正這一點。但是，如果我調整我的屏幕菜單將走出我的容器在右側..我不明白爲什麼？因爲它在容器中。

有人可以解釋一下嗎？

CSS-

#container { 
 
    width: 80%; 
 
    height: auto; 
 
    margin-top: -1%; 
 
    padding: 0 10%;} 
 
#header { 
 
    height: 270px; 
 
    background-color: gainsboro;} 
 
#menu { 
 
    height: 65px; 
 
    
 
    float: left; 
 
    background: darkgrey; 
 
    position: fixed;} 
 

 
#menu ul li { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    float: right; 
 
    margin: 20px 20px 0 0;} 
 
a { 
 
    text-decoration: none; 
 
    font-family: sans-serif; 
 
    color: lightblue; 
 
    font-size: 21px;}

<div id="container"> 
 
    <div id="header"> 
 
    <div id="menu"> 
 
     <ul> 
 
     <li><a href="#">Contact</a> 
 
    </li> 
 
     <li><a href="#">About</a> 
 
    </li> 
 
     <li><a href="#">Services</a> 
 
    </li> 
 
     <li><a href="#">Home</a> 
 
    </li> 
 
     
 
    
 
    </ul> 
 
    </div> 
 
    </div> 
 
    </div>

來源

2016-08-16 Barry B

你必須使用媒體查詢http://www.w3schools.com/css/css3_mediaqueries_ex.asp – Sankar

爲什麼不只是嘗試將容器寬度設置爲100％？ – rhavendc

移除浮子左。它是不necesary而利是顯示：內聯塊。另外，在#menu中固定的revome位置和黑暗的菜單將具有100％的寬度。

#menu { 
    height: 65px; 
    background: darkgrey; 
    }

Your code will look like this

來源

2016-08-16 09:26:12

謝謝你，但100％的寬度是沒有問題的。如果我向下滾動，我想讓我的菜單與我保持一致。這就是爲什麼我設置固定位置。但是，菜單縮短了，我只希望它有100％的寬度。

如果我改正它的寬度爲79％，我調整了我的屏幕菜單伸出右側（容器外？！？），我不明白。

我希望你們明白我的問題。

來源

2016-08-16 10:02:21

使用左邊：0代替float：左邊。

#menu { 
    height: 65px; 
    width: 100%; 
    left: 0; 
    background: darkgrey; 
    position: fixed; 
}

來源

2016-08-16 13:40:56 lwozniak

CSS-HTML-Resize屏幕

回答

相關問題