水平显示表单字段而不是垂直显示表单字段

Question

My Flask web app使用WTForms显示包含两个SelectFields的表单。表单是从WTFormsform.Form类继承的自定义表单。我还有一个从Flask Admin导入的BaseView。用户输入由几个SelectField组成（从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是垂直堆叠的，但我希望它们并排显示。有办法吗？谢谢

Answer 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