CSS-HTML-サイズ変更画面

Question

彼がいる！

私はBasic Webサイトでコーディングを理解することを学びます。 これは私が理解できないことです。

CSSで私はコンテナを持っています：幅80％ 内側に私はヘッダーを持っています：高さ270px ヘッダーの中に私はメニューがあります。高さ：65px

コンテナからの幅が80％なので、ヘッダーとメニューの幅を設定していませんでしたか？か否か？

これはうまく動作しますが、何がうまくいかないのはこれです。 メニューを固定したいのは、私がスクロールするときに私のメニューを持っていたいからです。

位置：固定; - メニューが短くなっていますか？なぜですか？私が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>

Answer 1

フロートを削除Liが表示されている間.ITは必須ではありません左：インラインブロック。また、#menuに固定されたリボーム位置とダークグレーメニューの幅は100％になります。

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

Your code will look like this

Answer 2

ありがとうございますが、100％の幅が問題ではありません。 私がスクロールすると、私のメニューが私にくっついて欲しいです。それで私は位置を固定にしました。しかし、メニューはそれほど短くはなく、私はそれが100％の幅を持つことを望んでいます。

私はそれを79％の幅で修正し、私の画面のサイズを変更すると、メニューが右側に外に出ています（コンテナの外？！？）。

私はあなたが私の問題を理解してくれることを願っています。

Answer 3

float：leftの代わりにleft：0を使用します。

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