为什么这个div使用100％宽度时会出现溢出？

Question

我已经创建了一个简单的

标签，其中包含一个

标签。但不知何故，它的宽度超过了屏幕的100％，即使我已经分配了100％的宽度。

我已经检查了额外的margin（边距）- 我知道我做错了什么！

有什么想法吗？

/* NEWSLETTER SECTION */
.newsletter-wrap {
  background-color: black;
  color: white;
  padding: 2rem 0.5rem 0.5rem 0.5rem;
  width: 100%;
  text-align: center;
}

.newsletter-wrap h4,
.newsletter-wrap label {
  font-weight: bolder;
  padding-bottom: 1rem;
  font-size: 1.3rem;
}

.newsletter-form input {
  padding: 0.5rem;
}

#submit-btn-newsletter {
  text-align: center;
}

#submit-btn-newsletter input {
  background-color: #d02121;
  color: white;
}

<div class="newsletter-wrap">
  <div class="newsletter-headline">
    <h4><b> JOIN OUR NEWSLETTER </b></h4>
  </div>
  <div class="newsletter-form">
    <form>
      <fieldset>
        <label> NAME: </label>
        <input type="text">
      </fieldset>
      <fieldset>
        <label>EMAIL: </label>
        <input type="text">
      </fieldset>
      <fieldset id="submit-btn-newsletter">
        <input type="submit" value="Subscribe">
      </fieldset>
    </form>
  </div>
</div>

- Shaz

---

* { box-sizing: border-box; } - bhv

Answer 1

padding导致了这个问题。

.newsletter-wrap {
    padding: 2rem 0.5rem 0.5rem 0.5rem; 
                    ^--------------^----------------------here
    //more code...
 }

将 box-sizing:border-box; 插入到 .newsletter-wrap 中

.newsletter-wrap {
  box-sizing: border-box;
  //more code....
}

或者插入以下代码：

* {
  box-sizing: border-box;
} 

 .newsletter-wrap {
  box-sizing: border-box;
 }
.newsletter-wrap {
    background-color: black;
    color: white;
    padding: 2rem 0.5rem 0.5rem 0.5rem;
    width: 100%;
    text-align: center;

 }
 .newsletter-wrap h4, .newsletter-wrap label {
        font-weight: bolder;
        padding-bottom:  1rem;
    font-size: 1.3rem;
 }

.newsletter-form input {
    padding: 0.5rem;

}
#submit-btn-newsletter  {

    text-align: center;
    }
#submit-btn-newsletter input {
    background-color: #d02121;
    color: white;

}    

<div class="newsletter-wrap">
    <div class="newsletter-headline">
        <h4><b> JOIN OUR NEWSLETTER </b></h4>
    </div>
    <div class="newsletter-form">
        <form>
            <fieldset>
                <label> NAME: </label>
                <input type="text">
            </fieldset>
            <fieldset>
                <label>EMAIL: </label>
                <input type="text">                     
            </fieldset>
            <fieldset id="submit-btn-newsletter">
                <input type="submit" value="Subscribe">                     
            </fieldset>                 
        </form>
    </div>

</div>  

阅读更多：

如果您不使用box-sizing: border-box;，则总宽度=填充+宽度+边框，但是当使用box-sizing: border-box;时，宽度属性（以及min/max属性）包括内容、填充和边框，但不包括边距。

- Ehsan

---

可以了。你能否解释一下 box-sizing 的作用和原因？ - Shaz

Answer 2

在 .newsletter-wrap 内使用 box-sizing:border-box;。

/* NEWSLETTER SECTION */
.newsletter-wrap {
    background-color: black;
    color: white;
    padding: 2rem 0.5rem 0.5rem 0.5rem;
    width: 100%;
    text-align: center;
 box-sizing:border-box;

 }
 .newsletter-wrap h4, .newsletter-wrap label {
        font-weight: bolder;
        padding-bottom:  1rem;
    font-size: 1.3rem;
 }

.newsletter-form input {
    padding: 0.5rem;

}
#submit-btn-newsletter  {

    text-align: center;
    }
#submit-btn-newsletter input {
    background-color: #d02121;
    color: white;

}

<div class="newsletter-wrap">
    <div class="newsletter-headline">
        <h4><b> JOIN OUR NEWSLETTER </b></h4>
    </div>
    <div class="newsletter-form">
        <form>
            <fieldset>
                <label> NAME: </label>
                <input type="text">
            </fieldset>
            <fieldset>
                <label>EMAIL: </label>
                <input type="text">                     
            </fieldset>
            <fieldset id="submit-btn-newsletter">
                <input type="submit" value="Subscribe">                     
            </fieldset>                 
        </form>
    </div>

</div>

- Rohit Verma

---

你的代码和我的代码有什么不同？你只是复制了我的代码。 - Ehsan

Answer 3

你可以将newsletter-wrap类的宽度改为max-width。

- Carlitos