我对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/
正如您所看到的,按钮比那些文本框略小。我做错了什么?
答案 0 :(得分:7)
默认设置是应用于内容框的宽度(不包括填充和边框)。由于填充不同,外部宽度不同。
您想要添加:
-moz-box-sizing: border-box;
box-sizing: border-box;
至少两个。
或者,您可以设置相同的padding
和border
以达到相同的效果。