html - 在按钮上设置宽度 = 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 属性(property)。

<button>默认情况下有 box-sizing: border-box应用。这意味着填充向内而不是向外应用。如果你给一个元素宽度 500px , 填充 15px , 和 box-sizing: border-box , 宽度将保持 500px .

然而，<input>元素(和大多数 元素)是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>