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{
    margin:0 -30px;
}

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

Answer 2

如果您向左/右边距添加负值，.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>