HTML 提交按钮的大小小于 100%？

Question

我对 HTML 表单及其提交按钮有一些小问题:

<form action="login/login.php" method="post" style="margin-top: 10px;">
      <input id="login" name="username" type="text" placeholder="Nutzername" />
      <input id="login" type="password" name="passwort" placeholder="Passwort" />
      <input id="login" type="submit" value="Anmelden" />
</form>

CSS:

input[type=text]#login, input[type=password]#login {
border: 1px solid #ccc;
display: block;
height: 20px;
text-align: center;
width: 100%; }

input[type=submit]#login {
display: block;
height: 20px;
text-align: center;
width: 100%;

结果:http://jsfiddle.net/jMTT3/72/

如您所见，按钮比那些文本框略小。我做错了什么？

Answer 1

默认设置是将宽度应用于内容框(不包括填充和边框)。由于内边距不同，外宽也不同。

你要添加:

-moz-box-sizing: border-box;
box-sizing: border-box;

至少对他们两个。

或者，您可以设置相同的padding和border来达到相同的效果。

编辑:Working Fiddle