如何对齐 Wagtail 电子邮件表单上的字段

Question

我使用 documented method 创建了一个 wagtail 电子邮件表单。不幸的是，当它显示时，输入字段没有对齐，看起来很业余。

html 是：

{% block content %}    
    <form action="{% pageurl page %}" method="POST">
        {% csrf_token %}
        {{ form.as_ul }}
        <input type="submit">
    </form>    
{% endblock %}

有没有办法整理一下，至少对齐输入字段的起始列？

Answer 1

最直接的解决方案是使用{{ form.as_table }}，将表单呈现为HTML <table> 而不是列表。但是，为了完全控制布局，您可以循环表单对象并在您喜欢的任何 HTML 结构中单独输出每个字段（然后可以使用 CSS 设置样式） - 有关详细信息，请参阅 Django 文档https://docs.djangoproject.com/en/stable/ref/forms/api/#more-granular-output。