在按钮上设置宽度= 100％时发出的问题

Question

实际上，我正在尝试将按钮的宽度设置为等于输入宽度，但是在100％的宽度下它不会获得相同的宽度，我也无法理解为什么。

body {
  background: #fff;
  padding: 0px;
  margin: 0px;
  font-family: 'Source Sans Pro', sans-serif;
}

input,
button {
  font-family: 'Source Sans Pro', sans-serif;
}

.main-div {
  width: 20%;
  margin: 0px auto;
  margin-top: 150px;
  padding: 20px;
}

.main-div input {
  display: block;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  padding: 15px;
  outline: none;
  width: 100%;
  margin-bottom: 20px;
}

.main-div button {
  display: block;
  background: #00a2ff;
  color: #fff;
  border: 0px;
  border-radius: 3px;
  padding: 15px;
  width: 100%;
}

<div class="main-div">
  <h3>Fatturazione Elettronica</h3>
  <input type="email" placeholder="Email..." />
  <input type="password" placeholder="Password..." />
  <button>Login</button>
</div>

实际上，我尝试过使用边距和边距进行游戏，但仍获得相同的输出。

Answer 1

您的按钮是 100%的宽度，但是您输入的是100% + 30px的宽度。归结为input元素和button元素的CSS box-sizing属性的默认值不同。

<button>默认情况下已应用box-sizing: border-box。这意味着填充是向内应用，而不是向外。如果您给某项设置宽度500px，填充15px和box-sizing: border-box，则宽度将保持500px。

但是，<input>个元素（和 most 个元素）为box-sizing: content-box，这意味着填充会增加到其宽度。相同的500px宽度，15px填充元素将改为具有530px的宽度（假设将填充应用于左侧和右侧）。

解决方案是使它们一致。将box-sizing: border-box添加到输入中（如下所述），或将button设置为box-sizing: content-box。

body {
  background: #fff;
  padding: 0px;
  margin: 0px;
  font-family: 'Source Sans Pro', sans-serif;
}

input,
button {
  font-family: 'Source Sans Pro', sans-serif;
}

.main-div {
  width: 20%;
  margin: 0px auto;
  margin-top: 150px;
  padding: 20px;
}

.main-div input {
  display: block;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  padding: 15px;
  outline: none;
  width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.main-div button {
  display: block;
  background: #00a2ff;
  color: #fff;
  border: 0px;
  border-radius: 3px;
  padding: 15px;
  width: 100%;
}

<div class="main-div">
  <h3>Fatturazione Elettronica</h3>
  <input type="email" placeholder="Email..." />
  <input type="password" placeholder="Password..." />
  <button>Login</button>
</div>

Answer 2

您应该在输入字段上使用box-sizing : border-box;属性，Here会找到有关它的信息！

input[type=email],
input[type=password] {
    box-sizing : border-box;
}

让我知道是否有帮助！ Here是要检查的Codepen链接！

Answer 3

实际上，CSS正在对内容进行正确的应用。请参阅chrome inspector的屏幕截图。

所以发生的事情是，应用于输入的填充除了扩展了20％的宽度之外，还扩展了输入，从而使按钮的宽度看起来不是100％。

因此，为避免这种情况，可以使用box-sizing属性。 您可以阅读有关MDN的box-sizing的信息。 box-sizing-mdn

* {
    box-sizing:border-box;
 }