输入和 按钮的宽度:100%;那么为什么它们的宽度不同呢?
如何使按钮适合 输入,以便当屏幕宽度发生变化时,按钮将与输入 的大小完全相同?
.form_wapper {
box-shadow: 0 0 16px 4px #00000047;
max-width: 243px;
margin: 0 auto;
padding: 59px 25px 28px;
}
.form_wapper input {
width: 100%;
}
.form_wapper button {
width: 100%;
border: none;
margin: 0;
}
<div class="form_wapper">
<form>
<input type="text">
<input type="text">
<input type="text">
<button>button</button>
</form>
</div>
这都是关于框架的
border
。box-sizing:content-box
在内容大小的情况下(在这种情况下,该值是默认设置的)取 100%,并且框架被抛出,这给出了额外的大小。我们修复了暴露box-sizing: border-box;
风格input
。因此,100% 的尺寸将与框架一起考虑,并且没有任何东西会爬出边界。但我建议使用一种思想上更正确的方式,以免依赖
border
和不明显的行为100%
,做出决定flex-box
,实际上就是为了解决此类问题。需要
input
添加box-sizing: border-box;
例子