CSS: 登录失败后表单输入文本框大小发生变化

Question

我正在开发 Java Spring 启动 Web 应用程序，但 CSS 不是我的专长。我附上了两张图片。一个是尝试登录前的登录页面，下一个是尝试登录失败后的登录页面。问题是，在将显示登录失败的文本添加到页面后，出于某种原因，输入字段的大小会变大。我不确定这是为什么，但我已经为下面的相关标签附上了 HTML 和 CSS：

<div id="parentLogin">

    <div class="row">
        
        <div class="col-md-12 col-md-offset-2">
        
            <div>
                <c:if test="${param.error != null}">
                    <div class="login-error" style="margin: 0 auto;">Incorrect username or password</div>
                </c:if>
            </div>
    
            <div class="panel panel-default" style="width: 275%;">
    
                <div class="panel-heading">
                    <div class="panel-title" style="text-align: center; font-weight: bold; font-size: x-large; margin: 1%;">User Login</div>
                </div>
                
                <div class="panel-body">
    
                    <form method="post" action="${loginUrl}" class="login-form">
                    
                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
    
                        <div class="input-group">
                            <input type="text" name="username" placeholder="Username"
                                class="form-control" />
                        </div>
    
    
                        <div class="input-group">
                            <input type="password" name="password" placeholder="Password"
                                class="form-control" />
                        </div>
    
                        
                        <button type="submit" class="suit_and_tie">Sign In</button>
                        
                    </form>
    
                </div>
    
            </div>
    
        </div>
        
    </div>

</div>

#profileAbout, #parentLogin {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75vh;
}

.login-error {
    margin-top: 10px;
    margin-bottom: 10px;
    color: red;
    font-weight: bold;
}

提前感谢您的帮助！

Answer 1

父容器.row没有指定宽度。这允许容器内的内容根据需要占用 space。当引入登录错误消息文本时，<input> 元素会变宽，因为错误消息中的文本会填满父容器的整个宽度。

试试这个。我给了 .row 一个特定的宽度并更新了一些 CSS 以模仿您包含的照片。现在，无论有无错误消息文本，您的包含登录内容的 .row 容器将始终为 240 像素宽或您想要的任何宽度。

#profileAbout, #parentLogin {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75vh;
}

.row {
  width: 240px;
  padding: 10px;
}

.panel-body {
  width: 100%;
}

input {
  width: 95%;
  margin: 3px;
  height: 25px;
}

.panel-title {
  text-align: center;
  margin: 5px;
}

.suit_and_tie {
  background: #FFF;
  margin-top: 5px;
  border-radius: 500px;
  border: 1.5px solid #000;
  padding: 5px 25px 5px 25px;
}

.login-error {
    margin-top: 10px;
    margin-bottom: 10px;
    width: auto;
    color: red;
    font-weight: bold;
}

<div id="parentLogin">

    <div class="row">
        
        <div class="col-md-12 col-md-offset-2">
        
            <div>
                <c:if test="${param.error != null}">
                    <div class="login-error" style="margin: 0 auto;">Incorrect username or password</div>
                </c:if>
            </div>
    
            <div class="panel panel-default">
    
                <div class="panel-heading">
                    <div class="panel-title" style="font-weight: bold; font-size: x-large; margin: 1%;">User Login</div>
                </div>
                
                <div class="panel-body">
    
                    <form method="post" action="${loginUrl}" class="login-form">
                    
                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
    
                        <div class="input-group">
                            <input type="text" name="username" placeholder="Username"
                                class="form-control" />
                        </div>
    
    
                        <div class="input-group">
                            <input type="password" name="password" placeholder="Password"
                                class="form-control" />
                        </div>
    
                        
                        <button type="submit" class="suit_and_tie">Sign In</button>
                        
                    </form>
    
                </div>
    
            </div>
    
        </div>
        
    </div>
</div>

CSS: 登录失败后表单输入文本框大小发生变化

CSS: Form Input Textbox Size Changing after Failed Login

html

css

font-size

centering