1

ブロックレベルの要素をコンテンツ領域の外に配置する必要があります。コンテンツ領域には 10px のマージンがあります。これは、(予想どおり) 内のアイテムが 10px のエッジで囲まれていることを意味します。このエッジを根絶する必要がありますが、10 ピクセルの余白を維持する必要があります (サイトの他の場所で必要になるため)。

色分けされた 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;
4

2 に答える 2

2

h2 に負のマージンを追加します。

http://jsfiddle.net/SxbZe/6/ (本文のマージンが 0 に設定されていることに注意してください)

.mobCategory h2 {
    margin-left: -10px;
    margin-right: -10px;
}
于 2013-03-14T12:55:40.667 に答える
0

差に対抗するために負のマージンとパディングを追加することで、ハックすることができます。

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

JSFiddle の例。

于 2013-03-14T12:51:47.263 に答える