將元素擴展到容器之外但將子元素保留在容器內

我最近遇到了一個問題，我想將所有內容保留在父容器中，但我希望導航背景爲頁面寬度的100％。我試過的方法已經在讓導航成爲100％寬度的頁面方面起作用，但現在ul裏面不受容器的影響，這正是我最初想要的。將元素擴展到容器之外但將子元素保留在容器內

我通過使用導航中的另一個容器div來得到它的工作，但我覺得這是一個非常臨時的方法。

關於如何讓父容器影響導航中的ul的任何建議？

HTML：

<div class="container"> 
    <nav class="menu"> 
    <div class="container"> 
    <ul> 
     <li><a href="#view1">HOME</a></li> 
     <li><a href="#view2">ABOUT ME</a></li> 
     <li><a href="#view3">SERVICES</a></li> 
     <li><a href="#view4">CURRENT PROJECT</a></li> 
     <li><a href="#view5">PORTFOLIO</a></li> 
     <li><a href="#view6">CONTACT ME</a></li> 
    </ul> 
    </div> 
    </nav> 
</div>

CSS：

.container { 
    margin: 0 auto; 
    width: 1200px; 
} 

.menu { 
    left: 0; 
    right: 0; 
    height: 80px; 
    position: fixed; 
    background-color: rgb(33, 33, 33); 
} 

.menu ul { 
    padding: 0; 
    margin: 0; 
    color: #fff; 
    list-style: none; 
    font-weight: bold; 
    height: 80px; 
    float: right; 
} 

.menu ul li { 
    display: inline-block; 
    padding-right: 50px; 
}

來源

2016-07-27 ParadAUX

'.container-fluid'將是一個不錯的選擇，我認爲。這裏是jsFiddle：https://jsfiddle.net/qp8qy7mq/1/ –

您可以使用:before或:after僞選擇創建背景效果，看起來就像width等於頁面的width。

body { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 
.container { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
} 
 

 
.menu { 
 
    height: 80px; 
 
    position: relative; 
 
} 
 

 
.menu:before { 
 
    background-color: rgb(33, 33, 33); 
 
    position: absolute; 
 
    right: -9999px; 
 
    left: -9999px; 
 
    content: ''; 
 
    z-index: -1; 
 
    bottom: 0; 
 
    top: 0; 
 
} 
 

 
.menu ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    color: #fff; 
 
    list-style: none; 
 
    font-weight: bold; 
 
    float: right; 
 
} 
 

 
.menu ul li { 
 
    display: inline-block; 
 
    padding-right: 50px; 
 
} 
 
.menu ul li a { 
 
    color: #fff; 
 
}

<div class="container"> 
 
    <nav class="menu"> 
 
    <ul> 
 
     <li><a href="#view1">HOME</a></li> 
 
     <li><a href="#view2">ABOUT ME</a></li> 
 
     <li><a href="#view3">SERVICES</a></li> 
 
     <li><a href="#view4">CURRENT PROJECT</a></li> 
 
     <li><a href="#view5">PORTFOLIO</a></li> 
 
     <li><a href="#view6">CONTACT ME</a></li> 
 
    </ul> 
 
    </nav> 
 
</div>

來源

2016-07-27 13:38:22

無論左或右我走多遠？正如我可以離開：-1;和右：-1;還是我必須使用特定的金額？另外，我不能在菜單標籤上使用相對位置，因爲該菜單旨在保留在頁面的頂部。 – ParadAUX

@ParadAUX如果您希望'.menu'的背景能夠拉伸100％的瀏覽器寬度，那麼''left'和'right'屬性最好使用'-9999px'。 Bcz，如果你使用像素爲「-50px」，那麼在頁面縮小時，你可能會看到兩個極端的空白。 –

將元素擴展到容器之外但將子元素保留在容器內

回答

相關問題