HTML - 使子元素忽略父Div的填充

Question

我有一個容器div內的頭部div，並且頭部具有與容器div不同的背景色。

<div class="container"> 

    <!-- Header --> 
    <header class="site-header"> 
     <h1>Site Title</h1> 
     <h5>Site Description</h5> 

     <nav class="site-nav"> 
      <ul> 
       <li>Item 1</li> 
       <li>Item 2</li> 
       <li>Item 3</li> 
       <li>Item 4</li> 
      </ul> 
     </nav> 

    </header> 

我的問題是，容器div有在左右兩側填充，但我想報頭忽略這個填充，所以背景顏色將顯示全寬，而不是被切斷由填充。

這裏是我的代碼的jsfiddle：http://jsfiddle.net/6e46fzge/

Answer 1

如果添加負左/右保證金爲.site-header，然後將相同的值添加到左/右填充中，您將獲得所需的效果。

div.container { 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    background-color: white; 
 
} 
 
.site-header { 
 
    margin: 0 -30px; 
 
    padding: 0 30px; 
 
    border-bottom: 2px dotted #999; 
 
    background-color: yellow; 
 
} 
 
.site-nav ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    padding-bottom: 20px; 
 
} 
 
.site-nav ul li { 
 
    padding: 2px; 
 
}

<div class="container"> 
 
    <!-- Header --> 
 
    <header class="site-header"> 
 
    <h1>Site Title</h1> 
 
    <h5>Site Description</h5> 
 

 
    <nav class="site-nav"> 
 
     <ul> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</div>

Answer 2

您可以簡單地使用相同的量填充的陰性切緣，

.site-header{ 
    margin:0 -30px; 
} 

http://jsfiddle.net/6e46fzge/1/