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

时间:2014-06-27 13:55:58

标签: html css forms input submit

我对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/

正如您所看到的,按钮比那些文本框略小。我做错了什么?

1 个答案:

答案 0 :(得分:7)

默认设置是应用于内容框的宽度(不包括填充和边框)。由于填充不同,外部宽度不同。

您想要添加:

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

至少两个。

或者,您可以设置相同的paddingborder以达到相同的效果。

编辑:Working Fiddle