0

好吧，我完全被这个难住了。标签内的文本在<h1>尝试将<h1>元素定位在<section>其所在位置时会导致背景移动。<p>标签不会导致此问题

我在<section>标签中有一个背景图片，如下所示：

.payroll {
        background-image: url('../img/payroll_bg.jpg');
        background-repeat: repeat-x;
        height: 567px;
    }

    .payroll h1 {
        color: #193441;
        text-align: left;
    }

    .pos {
        background-image: url('../img/pos_bg.jpg');
        background-repeat: repeat-x;
        height: 632px;

    }

我的 h1 在 CSS 中定义如下：

h1 {
    font-family: "Helvetica-light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 230%;
    color: #fcfff5;
    text-align: center;
}

我的 HTML 看起来像这样：

<section class="payroll">
        <h1>
            Payroll
        </h1>
</section><!-- END class="payroll"-->   

<section class="pos">
    <p>
        This is the pos Costing Section
    </p>

</section><!-- END class="pos" -->

如果我尝试<h1>通过添加边距来移动部分周围的元素，我将背景向下移动 4em .payroll h1 {：

.payroll h1 {
        color: #193441;
        text-align: left;
            margin: 4em 0 0 2em 
    }

上面的代码根本没有移动背景。

在我尝试使用边距移动元素之前，使用<p>标签不会导致背景移动。使用<h1>标签会导致背景立即下降。

再一次，我在这里完全被难住了。我还添加了图片来演示。

在此处输入图像描述

另一张带有边距属性的图片添加到<h1>标签中。

在此处输入图像描述

4

2 回答 2

1

尝试给 .payroll 或 .pos “溢出：隐藏；”。

于 2013-01-03T00:03:23.857 回答
0

让 h 标记向左浮动，然后添加清除 div

.payroll h1 {
        color: #193441;
        text-align: left;
        margin: 4em 0 0 2em ;
        float:left
    }

HTML：

<h1>
            Payroll
        </h1>
<div style="clear:both"></div>
于 2013-01-03T00:07:40.737 回答