Question

我创建了一个注册页面和一个登录页面。为此，我使用了django的默认身份验证功能和表单。为了进行一些修改，我使用了松脆的表格，但标签在屏幕上的位置不正确。我已在我的注册页面上附加了一张图片，您可以在其中看到标签用户名，密码，并且密码再次被错误定位。

Signup page

这是我的signup.html

{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block content %}


<body>
    <div class="container">
        <div class="col-md-6 mx-auto text-center">

            <img src="{% static 'pd/images/logo.png' %}" style="width:300px;">
            <h2>Welcome to Panasonic Energy</h2>

        </div>
        <div class="row">
            <div class="col-md-4 mx-auto">
                <div class="myform form ">
                    <form method="post">
                        {% csrf_token %}
                        {{ form|crispy }}


                        <div class="text-center ">
                            <button type="submit" class=" btn btn-block send-button tx-tfm">Create Your Free Account</button>
                        </div>
                        {% if form.errors %}
                        <p class=" label label-danger">
                            Please try again.
                        </p>
                        {% endif %}

                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
{% endblock %}

这是我的signup.css。我认为问题出在我的CSS中，因为影响样式的标签可能会覆盖Django的默认样式，因此我将其注释掉，但问题仍然存在。

.send-button {
    background: #54C7C3;
    width: 100%;
    font-weight: 600;
    color: #fff;
    padding: 8px 25px;
}

/* input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
} */

/* .g-button {
    color: #fff !important;
    border: 1px solid #EA4335;
    background: #ea4335 !important;
    width: 100%;
    font-weight: 600;
    color: #fff;
    padding: 8px 25px;
} */

/* .my-input {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: text;
    padding: 8px 10px;
    transition: border .1s linear;
} */

/* .header-title {
    margin: 5rem 0;
} */

h1 {
    font-size: 31px;
    line-height: 40px;
    font-weight: 600;
    color: #4c5357;
}

h2 {
    color: #5e8396;
    font-size: 21px;
    line-height: 32px;
    font-weight: 400;
}

/* .login-or {
    position: relative;
    color: #aaa;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
} */
/* 
.span-or {
    display: block;
    position: absolute;
    left: 50%;
    top: -2px;
    margin-left: -25px;
    background-color: #fff;
    width: 50px;
    text-align: center;
} */

.hr-or {
    height: 1px;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

@media screen and (max-width:480px) {
    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 20px;
    }
}

请帮助我确定这些标签的位置。预先感谢...

Answer 1

您应该将表单呈现为{% crispy form %}，因为您已经在顶部加载了脆皮的表单标签，而不是像{{ form|crispy}}，并且在{{ 1}}。因此，某些html也是多余的，您可以像

一样以酥脆的形式生成提交按钮

<form>

并确保您在视图中将其传递为

{% crispy form %}

如何修复默认Django表单中定位错误的标签？

1 个答案: