如何获取输入字段并提交相同大小的按钮

Question

我是这个网站的新手，也是 html 和 css 的初学者。我正在做一个个人练习项目，设计要求输入框和提交按钮的高度为 55 像素，宽度为 320 像素。这两个都包括一个 2px 的边框和一个 15px 的内边距。我不确定为什么我当前的代码没有产生相同的尺寸。输入按钮明显小于输入框（宽度和高度）。

任何帮助将不胜感激。

body {
  background-color: blue;
}

/* LOGO */

.logo img {
  height: 35px;
  padding: 50px;
  display: block;
  margin: 0 auto;
}

/* FORM */

.form {
  background-color: white;
  width: 400px;
  height: 500px;
  padding: 40px;
  border-radius: 5px;
  margin: 0 auto;
}

h1 {
  font-family: "Courier New", Courier;
  font-weight: normal;
  text-align: center;
  padding: 20px;
}
input[type='email'],
input[type='password'],
button[type='submit']{
  height: 38px;
  width: 303px;
  border: 2px solid gray;
  padding: 15px;
  margin: 15px auto;
  display: block;
  font-size: 15px;
  border-radius: 5px;

}

button {
  background-color: green;
}

span {
  color: white;
}

<div class="logo">
  <img src="images/logo.png" alt="AnalogSea logo">
</div>

<div class="form">
  <h1>Sign up</h1>
  <form action="/signup" method="post" class="form_section">
    <label class="email button_size" for="email" required>Email</label><br>
    <input placeholder="foo@bar.com" type="email" name="email" id="email"><br>
    <label class="email button_size" for="password" required>Password</label><br>
    <input placeholder="1234passw0rd" type="password" name="password"><br>
    <button type="submit"><span>Sign Up</span></button>
  </form>
</div>

Answer 1

它发生的原因是box-model 在浏览器中的呈现方式。在您的示例中，填充是导致问题的原因。对于按钮，内边距和边框包含在303px中，所以按钮总共有303px宽。对于<input> 元素，填充和边框添加到总宽度，使其宽度为337px。

要解决此问题，您可以采取多种方式。您可以全局重置box-sizing（CSS 中处理此问题的属性），例如：

* { box-sizing: border-box }

或者您可以将其添加到 <input> 元素中。

input[type="whatever"] { box-sizing: border-box }

我个人在全局范围内进行重置，以使事情保持一致。这是我的偏好。

如果这样做，则必须将元素上的 height 重新调整为 68px，因为现在填充将被视为 height 属性的一部分，而不是添加到其中。

这里有一些关于盒子模型的阅读：http://www.w3schools.com/css/css_boxmodel.asp

这里有一些关于 box-sizing 属性的阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

希望这会有所帮助！

Answer 2

我会改变：

<button type="submit"><span>Sign Up</span></button>

到

<input type='submit' value='Sign Up' />

然后更改您的 CSS。此解决方案也更向后兼容。