python - wtforms Integer Field 在网页上显示时是否强制换行？

Question

我使用 wtforms 作为 Python + Flask 项目的一部分。在某些情况下，我希望表单的多个字段出现在网页的同一行。使用 SelectField，这可以按预期工作。但是，当我使用 IntegerField 时，它似乎会在显示字段后自动创建一个新行，并且我在一行上有多个。

表格：

class PremiumMandatory(FlaskForm):
    match_dol = IntegerField('Dollar')
    match_per = IntegerField('Percent')

.html

{{form.match_dol.label}}
${{form.match_dol(size=3)}}

&nbsp
{{form.match_per(size=3)}}%
{% for error in form.match_per.errors %}

使用上述内容，这两个字段也出现在网页的不同行上。我如何保持在同一条线上？

标签： pythonflaskwtforms

Answer 1

这完全是一个 HTML/CSS 问题。有很多方法可以将一个表单的多个字段放在同一行，例如，您可以使用Bootstrap 的网格系统，它非常易于使用。

另一种简单的方法是：

<form>
    <div style="display: table;">
        <div style="display: table-row;">
            <div style="display: table-cell;">
                {{ form.match_dol.label }}
                {{ form.match_dol(size=3) }}
            </div>
            <div style="display: table-cell;">
                {{ form.match_per.label }}
                {{ form.match_per(size=3) }}
            </div>
        </div>
        <div style="display: table-row;">
            ...
        </div>
    </div>
</form>