如何并排放置 django 表单字段

Question

I have a UserCreationForm which I want the first_name and last_name to be side by side, When I try the whole fields are side to side, I want the other fields to have their own line. form.html:

{% csrf_token %}
{% for field in form %}
<p>
    {% if field.help_text %}
    <small style="color: grey">{{ field.help_text }}</small>
    {% endif %}
    {{ field.label_tag }}
    {{ field }}
    {% for error in field.errors %}
    <p style="color: red">{{ error }}</p>
    {% endfor %}
</p>
{% endfor %} 

forms.py:

class AccountCreationForm(UserCreationForm):
    class Meta:
        model = Account
        fields = ('first_name','last_name', 'email')

Answer 1

Since you are surrounding each field with a <p> tag, they all go into a separate line each. You can render your fields individually to style them as you like. Also check out this article for some examples.

I wrote a quick snippet for your exact case. Note that I render the fields individually and have both name fields in the same <p> (Paragraph) tag.

    <p>
        {% if form.first_name.help_text %}
        <small style="color: grey">{{ form.first_name.help_text }}</small>
        {% endif %}
        {{ form.first_name.label_tag }}
        {{ form.first_name }}
        {% for error in form.first_name.errors %}
        <span style="color: red">{{ error }}</span>
        {% endfor %}
        {% if form.last_name.help_text %}
        <small style="color: grey">{{ form.last_name.help_text }}</small>
        {% endif %}
        {{ form.last_name.label_tag }}
        {{ form.last_name }}
        {% for error in form.last_name.errors %}
        <span style="color: red">{{ error }}</span>
        {% endfor %}
    </p>
    <p>
        {% if form.email.help_text %}
            <small style="color: grey">{{ form.email.help_text }}</small>
            {% endif %}
            {{ form.email.label_tag }}
            {{ form.email }}
            {% for error in form.email.errors %}
            <span style="color: red">{{ error }}</span>
            {% endfor %}
    </p>