Question

我需要将一个块级元素放在它的内容区域之外。内容区域的边距为10px;这意味着（正如预期的那样）其中的物品围绕它们具有10px的边缘。我需要消除这一优势，但保持10px的保证金（因为它需要在网站的其他地方。）

我已经整理了一个colour-coded JSFiddle帮助，这更有意义。基本上，保持HTML和CSS的边距不变，我需要我的红色h2扩展到触摸视口的任一边缘，就像它们是100％一样。

如何实现这一目标？我知道使用负边距是可能的，但我似乎无法使其发挥作用。

<div class="contentMain">
<div class="mobCategory">
    <h2><a href="#">Item one</a></h2>
    <h2><a href="#">Item two</a></h2>
    <h2><a href="#">Item three</a></h2>
</div>

body{
        background-color:orange;
    }
    .contentMain{
        background-color:olive;
        margin:10px;
    }

    .mobCategory h2 a{
        background-color:red;

Answer 1

将负边距添加到h2：

http://jsfiddle.net/SxbZe/6/（请注意，正文的边距设置为0）

.mobCategory h2 {
    margin-left: -10px;
    margin-right: -10px;
}

Answer 2

你可以通过添加负边距和填充来破解它，以抵消差异：

.mobCategory h2 a {
    margin-left: -10px;
    padding-right: 20px;
}

JSFiddle example

使用负边距使块级元素位于其内容区域之外

2 个答案: