固定不遵守最大寬度容器父母的位置

我正在嘗試製作水平導航欄，現在我的div導航欄不使用max-width：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

這種改變是否適合你？ '＃導航li {float}：left; }' –

也許試試這個？ https://jsfiddle.net/matt9388/1vyruezr/1/我增加了寬度：100％;到你的#nav div，並將你的填充值移動到ul元素。設置爲100％時，填充會導致您的div脫離屏幕。 – Matt

我搬到你的最大寬度您#navigation元素，並將其設置爲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

固定不遵守最大寬度容器父母的位置

回答

相關問題