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实现相同的效果.

编辑:工作小提琴