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

我想在我的登录表单的输入字段中添加边框，但是当我添加边框时：1px纯黑；若要#登录表单输入，则所有文本框将移出位置

下面是没有边界的情况：

这里是边界：

当用户在表单中输入不正确的凭据时，表单上方会显示一条消息，这也会导致表单更改位置，即使输入没有应用边框，也会发生这种情况

以下是此项目的屏幕截图：

我已尝试清除所有浮动，但这并没有产生任何影响：

这是我的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>

如果有人能用任何解决方案更新我的代码，并解释如何解决这个问题，我们将不胜感激

---

非常感谢

我只是在

#登录表单输入

中增加边距底部，并在其中添加边框

页边距顶部：40px；
宽度：100%；
边框底部：1px实心#aaa；
线高：30px；
}
.注册，.注册{
字体大小：20px；
颜色：#000000；
字体系列：“Roboto”，无衬线；
字体大小：300；
显示：内联块；
}
.注册{
字体大小：14px；
}
.签一份{
文字装饰：无；
颜色：#0790cb；
}
.注册a:悬停{
文字装饰：下划线；
}
.在文本中签名{
边缘顶部：20px；
字体系列：“Roboto”，无衬线；
字号：500；
字体大小：16px；
}
#登录表单{
边缘顶部：20px；
}
#登录表单标签{
浮动：左；
宽度：150px；
文本对齐：右对齐；
右边距：0.5em；
边缘底部：15px；
字体大小：13px；
线高：30px；
}
#登录表单输入{
宽度：250px；
高度：25px；
边框：1px纯黑；
保证金底部：18px；/*增加保证金-底部*/
明确：两者皆有；
}
#登录表单按钮{
-webkit边界半径：2；
-moz边界半径：2；
边界半径：2px；
边界：无；
字体系列：“Roboto”，无衬线；
颜色：#ffffff；
字体大小：14px；
背景：#004d6e；
填充：8px 20px 8px 20px；
文字装饰：无；
显示：内联块；
}
#登录表单按钮：悬停{
背景:#3434；
文字装饰：无；
}
.注册标签{
显示：内联块；
左边距：20px；
字体大小：12px；
字体大小：300；
字体系列：“Roboto”，无衬线；
}

登录或
使用您的帐户登录
电邮：


密码：
登录

如果在第一次输入后添加第二个

，则它将被删除。无法解释代码为什么不工作，心想。

只是一个旁注：为什么标签不以输入为目标，或者不包装输入？？？他们什么也不做。。

.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;  
}