当宽度为100％时，为什么这个div会溢出？

Question

我创建了这个简单div，其form。由于某种原因，即使我指定的宽度为100％，其宽度仍大于屏幕的100％。

我已经检查了额外的保证金 - 我知道我做错了什么！

有什么想法吗？

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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; total width = padding + width + border，但是当使用box-sizing: border-box;时，width属性（和min / max属性）包括内容，填充和边框，但是不是保证金。

Answer 2

在box-sizing:border-box;

中使用.newsletter-wrap

＆＃13;

＆＃13;

/* 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;

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以在newsletter-wrap class

中将宽度更改为max-width