最大幅のコンテナの親に従わない位置固定

水平ナビゲーションバーを作成しようとしていますが、現在はdivの最大幅を使用していません：1200pxは<body>に設定されています。画面の右側に表示されます。幅：100％を追加するか、ナビゲーションを継承しても助けにならない、幅100％が私の最大幅を超える。最大幅のコンテナの親に従わない位置固定

body { 
 
    margin: 0 auto; 
 
    max-width: 1200px; 
 
    font-family: Helvetica, Arial; 
 
    background-color: #F7F7F7; 
 
} 
 
#wrapper { 
 
    position: relative; 
 
    z-index: 0; 
 
    margin: 1% 4% 2%; 
 
    padding: 1rem; 
 
} 
 
#navigation { 
 
    position: fixed; 
 
} 
 
#navigation ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#navigation li { 
 
    float: right; 
 
}

<div id="wrapper"> 
 
    <div id="navigation"> 
 
    <ul> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">Projects</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

出典

2016-09-19 Higeath

最大幅の親要素を無視作ると思いますか？ https://jsfiddle.net/nkoabk5h/ – Aer0

この変更は有効ですか？ '#navigation li { float：left; } ' –

これはおそらく試してみますか？ https://jsfiddle.net/matt9388/1vyruezr/1/幅：100％を追加しました。 #nav divに移動し、パディングをulエレメントに移動しました。あなたのdivが100％に設定されている場合、パディングが画面外に出ていました。 – Matt

私はあなたの#navigation要素にあなたのmax-widthを移動し、100％の幅に設定します。また、パディングをul要素に移動しました。

ここに更新済みfiddleがあります。

#navigation { 
    position: fixed; 
    max-width:1200px; 
    width:100%; 
    border: 1px solid red; 
} 

#navigation ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    padding: 1rem; 
}

は、私は多分固定位置がdiv要素は、これはあなたが探しているものかもしれませ

出典

2016-09-20 12:16:02 Matt

最大幅のコンテナの親に従わない位置固定

答えて

関連する問題