[英]Why does this div overflow when width is 100%?
I have created this simple div
which has a form
. 我创建了这个有
form
简单div
。 For some reason its width is greater than 100% of screen even when I've assigned width of 100%. 由于某种原因,即使我指定宽度为100%,其宽度仍大于屏幕的100%。
I've checked for extra margin – I know I'm doing something wrong! 我已经检查了额外的保证金 - 我知道我做错了什么!
Any ideas? 有任何想法吗?
/* 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>
padding
created this problem. padding
创建了这个问题。
.newsletter-wrap {
padding: 2rem 0.5rem 0.5rem 0.5rem;
^--------------^----------------------here
//more code...
}
insert box-sizing:border-box;
insert
box-sizing:border-box;
to .newsletter-wrap
到
.newsletter-wrap
.newsletter-wrap {
box-sizing: border-box;
//more code....
}
OR insert this 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>
Read more : 阅读更多 :
If you don't use of box-sizing: border-box;
如果你不使用
box-sizing: border-box;
total width = padding + width + border ,but when use box-sizing: border-box;
total width = padding + width + border,但是当使用
box-sizing: border-box;
The width properties (and min/max properties) includes content, padding and border, but not the margin. 宽度属性(和最小/最大属性)包括内容,填充和边框,但不包括边距。
Use box-sizing:border-box;
使用
box-sizing:border-box;
inside .newsletter-wrap
在里面
.newsletter-wrap
/* 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>
您可以在newsletter-wrap类中将宽度更改为max-width
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.