水平而不是垂直显示 Flask WTForms 字段答案

【问题标题】：Displaying Flask WTForms fields horizontally instead of vertically水平而不是垂直显示 Flask WTForms 字段
【发布时间】：2021-10-03 18:33:49
【问题描述】：

我的 Flask Web 应用程序使用 WTForms 来显示一个带有两个 SelectFields 的表单。该表单是继承自 WTForms form.Form 类的自定义表单。我还有一个从 Flask-Admin 导入的 BaseView。用户输入由几个SelectFields（来自wtforms.fields）组成，它们都垂直堆叠在一起。有没有办法水平显示 SelectFields，使field1 在field2 的左侧，而不是在field2 的上方？谢谢。

当前代码（为清楚起见进行了编辑）：

# form.py

from flask_admin import BaseView
from wtforms import form
from wtforms.fields import SelectField

class FormA(form.Form):
    field1 = SelectField(choices=[('A', 'Choice A'), ('B', 'Choice B')])
    field2 = SelectField(choices=[('C', 'Choice C'), ('D', 'Choice D')])
   
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

class ViewA(BaseView):
    @expose('/', methods=('GET',))
    def index(self):
        form = FormA()
        return self.render('admin/form.html', form=form)

在form.html 文件中，我正在导入flask-admin 并创建表单：

<!--form.html-->

{% import "admin/lib.html" as lib with context %}

{% block head_tail %}
<!--other stuff-->
{% endblock %}

{% block subheader %} {
<form method="GET">
    {{ lib.render_form_fields(form)}}
</form>
{% endblock %}

{% block body %}
<!--other stuff-->
{% endblock %}


{% block tail %}
<!--other stuff-->
{% endblock %}

现在field1 和field2 是垂直堆叠的，但我希望它们并排显示。有没有办法做到这一点？谢谢。

【问题讨论】：

标签： python html flask jinja2 flask-wtforms

【解决方案1】：

您可以使用 css 定位表单并设置display: flex。

你可以给你的表单一个id：

<form id="myform" method="GET">
    {{ lib.render_form_fields(form)}}
</form>

并像这样使用 css 定位它：

#myform {
    display: flex;
}

或者，如果您不希望整个表单将display 设置为flex，您可以用一个div 包围render_form_fields 并在此div 上设置display: flex。

【讨论】：