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在右侧和左侧都有填充，但是我希望标题忽略此填充，因此背景颜色将显示完整宽度而不会被填充切断。

这是我的代码的一个小提示：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>

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

2 个答案: