html表格输入框怎么左移动,当我向CSS中的文本框添加边框时，HTML表单输入会移动...

我想在登录表单上的输入字段中添加边框，但是当我添加边框时：1px纯黑色;到＃登录表单输入，然后所有的文本框移出位置。当我向CSS中的文本框添加边框时，HTML表单输入会移动

当用户输入不正确的凭据到表单，然后在表单上方会显示一条消息，这也会导致表单改变位置，即使没有边界应用于输入，也会发生这种情况。

我试图清除所有的彩车但是这并没有区别：

这里是我的HTML：

Sign In

  or  Sign Up

Sign in with your account

Email:

Password:

Log In

Not Registered ?

这里CSS：

.sign_in_header {

margin-top:40px;

width:100%;

border-bottom:1px solid #aaa;

line-height:30px;

}

.sign_in, .sign_up{

font-size:20px;

color:#000000;

font-family: 'Roboto', sans-serif;

font-weight:300;

display:inline-block;

}

.sign_up {

font-size:14px;

}

.sign_up a {

text-decoration: none;

color:#0790cb;

}

.sign_up a:hover {

text-decoration: underline;

}

.sign_in_text {

margin-top:20px;

font-family: 'Roboto', sans-serif;

font-weight:500;

font-size:16px;

}

#login-form {

margin-top:20px;

}

#login-form label {

float: left;

width: 150px;

text-align: right;

margin-right: 0.5em;

margin-bottom:15px;

font-size:13px;

line-height:30px;

}

#login-form input {

width:250px;

height:25px;

margin-bottom:15px;

clear:both;

}

#login-form button {

-webkit-border-radius: 2;

-moz-border-radius: 2;

border-radius: 2px;

border:none;

font-family: 'Roboto', sans-serif;

color: #ffffff;

font-size: 14px;

background: #004d6e;

padding: 8px 20px 8px 20px;

text-decoration: none;

display:inline-block;

}

#login-form button:hover {

background: #343434;

text-decoration: none;

}

.sign_up_label {

display:inline-block;

margin-left:20px;

font-size:12px;

font-weight:300;

font-family: 'Roboto', sans-serif;

}

如果有人愿意能够t o用任何解决方案更新我的代码，并可能解释问题是如何解决的 - 这将不胜感激。

非常感谢提前。

+0

只是一个侧面说明：为什么你的标签不是针对输入，还是换行输入？他们不做任何事情.. –