Question

我有一个父（容器）和一个子（一个h1标题/块）。

.container {
    width: 1024px;
}
#h1 {
    width: 1024px;
    padding: 0 30px 0 30px;
    background-color: something;
}

问题是由于某种原因，而不是从父级向左延伸30个像素向右延伸30个像素，而是向右延伸60个像素。现在我只设置一个-30px的负左边距将其拉回来使其均匀，但我想知道是否有更好/正确的方法来做它？

这是发生了什么的图片：

这是我希望它看起来像的图片（并且看起来像负边距）：

Answer 1

在这种情况下，负边距是唯一可行的方式（并且是我认为可以接受使用的少数情况之一）。

您可以探索其他解决方案（例如，将红色bg设置为中心对齐的bg图像，然后为div之外的内容填充h1，但实际上没有奖励使用负边际来做这件事，实际上长期来说它的可维护性较差。

正如已经建议的那样，你也可以使用定位来解决这个问题（参见下面的例子）。

HTML：

<div class="container">
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <h1>testing, testing, 1 2 3</h1>
</div>

CSS：

.container {
    background: #f00;
    margin: 0 0 0 20px;
    padding: 100px 0;
    position: relative;
    width: 400px;
}

h1 {
    background: #00f;
    color: #fff;
    left: -20px;
    padding: 0 20px;
    position: absolute;
    width: 100%;
}

http://jsfiddle.net/d7KJ9/4/

不幸的是，虽然在h1之后添加内容似乎打破了这种方法：

http://jsfiddle.net/d7KJ9/2/

此外，如果上述方法确实有效，那么它不一定比使用负余量更好（它实际上涉及更多的CSS）。

总之，只要采用负边际解决方案，如果使用得当，负边距不一定是坏事，只是在使用之前与自己合理（有没有更好的方法来实现你想要的？）

Answer 2

负利润是完全正常的。或者你可以通过绝对和相对定位以编程方式定位。

<强> CSS

.container {
  background: crimson;
  height: 600px;
  margin: 0 auto;
  width: 300px;
}

.header {
  background: purple;
  height: 100px;
  left: 0;
  margin: 60px auto;
  padding: 0 30px;
  position: absolute;
  right: 0;
  width: 360px;
}

<强> HTML

<div class='container'>
  <div class='header'></div>
</div>

Codepen example.

Answer 3

您可以在position:relative上使用left然后#h1：

.container {
  width: 400px;
  height: 500px;
  background: red;
  margin: 0 auto;
}

#h1 {
  width: 400px;
  height: 40px;
  left: -30px;
  background: blue;
  padding: 0 30px;
  position: relative;
  top: 40px;
}

在JSBin

中试用

如何让孩子正确超过父母宽度？

3 个答案: