Question

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

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

我已经尝试清除所有花车，但这并没有什么区别：

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

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

非常感谢提前。

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。无法解释为什么你的代码不起作用，想想。

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

2 个答案: