Question

我的容器有问题。

此容器应具有宽度：100％和边距：0自动。我当然把它写下来但它不起作用。

HTML

<section class="testimonial">
    <div class="testimonial-info">
        <h2>Customer Testimonials</h2>
        <p>Here's what our customers say about working with us.</p>
    </div>
    <div class="testimonial-box">
        <p>"Payment Solutions T/A SmartDebit have worked with The London Mint Office since we began to trade in the UK in 2006. They advised us on our payment processing platform from conception, implementation through to live processing of the major payment types. They worked with us side by side in setting up services with our Bank which proved invaluable. With SmartDebit’s assistance we moved from an outsourced fulfilment and call centre to our own establishment which involved complex development of payment systems involving the UK, Norway and Germany. Our activities since then have grown substantially and we continue to seek advice and service from SmartDebit. We set up Direct Debits at the outset and are now investigating developing this further into online processing. We have found the services reliable which is critical in our marketplace. They have a solid understanding of the payment processing business across the board."</p>
    </div>
</section>

CSS

 .testimonial
{
    margin-top: 60px;
    text-align: center;
    padding: 40px;
}

.testimonial p
{
    padding: 20px 0;
    text-align: center;
}

.testimonial-box
{   
    background-color: #006db6;
    width: 100%;
    margin: 0 auto;
    padding: 20px 40px;
}

.testimonial-box p
{
    color: #FFF;
}

Answer 1

问题是你的容器是.testimonial部分宽度的100％，但是推荐也有40px填充。因此，您的容器是该部分的整个宽度，左侧是+ 40像素。

一种解决方案是给.testimonial-box类提供0 -40px的边距，如下所示：

＆＃13;

.testimonial
{
    margin-top: 60px;
    text-align: center;
    padding: 40px;
}

.testimonial p
{
    padding: 20px 0;
    text-align: center;
}

.testimonial-box
{   
    background-color: #006db6;
    width:100%;
    margin: 0 -40px;
    padding: 20px 40px;
}

.testimonial-box p
{
    color: #FFF;
}

＆＃13;

<section class="testimonial">
    <div class="testimonial-info">
        <h2>Customer Testimonials</h2>
        <p>Here's what our customers say about working with us.</p>
    </div>
    <div class="testimonial-box">
        <p>"Payment Solutions T/A SmartDebit have worked with The London Mint Office since we began to trade in the UK in 2006. They advised us on our payment processing platform from conception, implementation through to live processing of the major payment types. They worked with us side by side in setting up services with our Bank which proved invaluable. With SmartDebit’s assistance we moved from an outsourced fulfilment and call centre to our own establishment which involved complex development of payment systems involving the UK, Norway and Germany. Our activities since then have grown substantially and we continue to seek advice and service from SmartDebit. We set up Direct Debits at the outset and are now investigating developing this further into online processing. We have found the services reliable which is critical in our marketplace. They have a solid understanding of the payment processing business across the board."</p>
    </div>
</section>

＆＃13;

如果要保留40px填充，只需删除宽度：100％

＆＃13;

.testimonial
{
    margin-top: 60px;
    text-align: center;
    padding: 40px;
}

.testimonial p
{
    padding: 20px 0;
    text-align: center;
}

.testimonial-box
{   
    background-color: #006db6;
    padding: 20px 40px;
}

.testimonial-box p
{
    color: #FFF;
}

＆＃13;

<section class="testimonial">
    <div class="testimonial-info">
        <h2>Customer Testimonials</h2>
        <p>Here's what our customers say about working with us.</p>
    </div>
    <div class="testimonial-box">
        <p>"Payment Solutions T/A SmartDebit have worked with The London Mint Office since we began to trade in the UK in 2006. They advised us on our payment processing platform from conception, implementation through to live processing of the major payment types. They worked with us side by side in setting up services with our Bank which proved invaluable. With SmartDebit’s assistance we moved from an outsourced fulfilment and call centre to our own establishment which involved complex development of payment systems involving the UK, Norway and Germany. Our activities since then have grown substantially and we continue to seek advice and service from SmartDebit. We set up Direct Debits at the outset and are now investigating developing this further into online processing. We have found the services reliable which is critical in our marketplace. They have a solid understanding of the payment processing business across the board."</p>
    </div>
</section>

＆＃13;

Answer 2

像迈克尔说的那样，问题就在于你的填充。

有关CSS如何计算宽度的解释，请参阅此处：https://css-tricks.com/box-sizing/

Imo，一种更加语义/更清晰的解决方案就是指定

box-sizing: border-box;

在100％宽度div。

宽度100％的容器

2 个答案: