当我向CSS中的文本框添加边框时，HTML表单输入会移动

Question

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

这里是什么样子没有边框：http://imgur.com/mjXjf3W

这与边框：http://imgur.com/Yt9H2Nr

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

这里就是一个屏幕截图：http://imgur.com/c3Frc0z

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

这里是我的HTML：

<div class="sign_in_header"> 
     <div class="sign_in">Sign In</div><div class="sign_up">&nbsp;&nbsp;or&nbsp;<a href="register.php">Sign Up</a></div> 
    </div> 
    <div class="sign_in_text"> 
     Sign in with your account 
    </div> 

<div id="login_error"></div> 

<div id="login-form"> 
    <form method="post"> 
     <div id="login_form_input"> 
     <label>Email:</label><input align="right" text="Email" name="email" required /> 
     <br> 
     <label>Password:</label><input type="password" name="pass" required /> 
     </div> 
     <button type="submit" name="btn-login">Log In</button> 
     <div class="sign_up_label"><a href="register.php">Not Registered ?</a></div> 
    </form> 
</div> 

这里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用任何解决方案更新我的代码，并可能解释问题是如何解决的 - 这将不胜感激。

非常感谢提前。

Answer 1

我只是在#login-form input增加边界底部并在此添加边框。

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; 
 
    border:1px solid black; 
 
    margin-bottom:18px;/*increase margin -bottom*/ 
 
    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; 
 
}

<div class="sign_in_header"> 
 
     <div class="sign_in">Sign In</div><div class="sign_up">&nbsp;&nbsp;or&nbsp;<a href="register.php">Sign Up</a></div> 
 
    </div> 
 
    <div class="sign_in_text"> 
 
     Sign in with your account 
 
    </div> 
 

 
<div id="login_error"></div> 
 

 
<div id="login-form"> 
 
    <form method="post"> 
 
     <div id="login_form_input"> 
 
     <label>Email:</label><input align="right" text="Email" name="email" required /> 
 
     <br> 
 
     <label>Password:</label><input type="password" name="pass" required /> 
 
     </div> 
 
     <button type="submit" name="btn-login">Log In</button> 
 
     <div class="sign_up_label"><a href="register.php">Not Registered ?</a></div> 
 
    </form> 
 
</div>

Answer 2

如果你的拳头输入后添加第二<br>，它works。想不到，为什么你的代码没有工作。