登录页面错误消息排版优化：调整位置与容器自适应

问题说明 #

当输入无效凭证时，页面会输出错误消息：Sorry, your password was incorrect.<br/> Please double-check your password，但当前显示位置和容器高度不符合需求，需将消息放在登录按钮与「Forgot password?」链接之间，同时白色登录容器（login-box）需自动向下扩展以预留消息空间。

修改后的HTML代码 #

<div class="testlol2">
    <div class="login-box">
        <img class="logo" src="{% static 'images/testlogo.png' %}" alt="">
        <div class="testlol">
            <form action="" method="post">
                {% csrf_token %}
                {{ form|crispy }}
                <div class="my-button">
                    <input class="login-button" type="submit" value="Log in">
                </div>
            </form>
            {% if messages %}
            <div class="messages">
                {% for message in messages %}
                    <p{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</p>
                {% endfor %}
            </div>
            {% endif %}
            <a class="forgot" href="">Forgot password?</a>
        </div>
    </div>
</div>

修改后的CSS代码 #

body{
    background-color: #fafafa !important;
}

.messages {
    color: red;
    margin: 10px 0;
    text-align: center;
    font-size: 12px;
}

.logo {
    width: 200px;
    margin: 28px auto 0;
    display: block;
}

.testlol {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.testlol2 {
    display:flex;
    justify-content: center;
    margin-top: 100px;
}

.login-box {
    display:flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 1px;
    margin:0 0 10px;
    padding: 10px 0;
    width: 325px;
    min-height: 280px;
}

.forgot {
    display: block;
    font-size: 12px;
    margin-top: 12px;
    text-align: center;
    color: #000000;
    line-height: 14px!important;
    text-decoration: none;
}

关键修改点 #

• 容器自适应高度：移除login-box的固定height，改用min-height，确保有错误消息时容器自动向下扩展。
• 布局结构优化：将错误消息容器放在表单与忘记密码链接之间，同时删除大量冗余的position: relative/absolute定位，改用margin、flex布局控制元素间距，避免布局偏移。
• 样式细节调整：给错误消息添加居中对齐与上下边距；调整logo的居中方式，用margin: auto替代相对定位；给testlol添加内边距，让内容在容器内合理分布。

内容的提问来源于stack exchange，提问作者tiberhockey