如何让Symfony表单的输入框与提交按钮同行显示？

要让输入框和提交按钮在同一行显示，核心是给包裹按钮的div设置display:inline，以下是两种直接可行的实现方法：

方法一：通过表单构建器直接设置行属性 #

在创建提交按钮时，使用row_attr选项为外层div添加样式：

$form = $this->createFormBuilder($typeClient , array('attr' => array('novalidate' => 'novalidate')))
        ->add('Label', TextType::class , ['label' => 'Libellé :'])
        ->add('Enregistrer', SubmitType::class, [
            'label' => 'Enregistrer',
            'row_attr' => ['style' => 'display:inline'] // 给外层div设置inline样式
        ])
        ->getForm();

这种方式无需修改Twig主题，直接针对提交按钮的行容器设置属性，生成的HTML中按钮外层div会自动带上style="display:inline"。

方法二：修改自定义Twig主题 #

如果需要统一处理或针对提交按钮单独定制，修改你的form.html.twig主题文件：

方案1：统一调整所有表单行的外层容器 #

如果希望所有表单行都使用inline布局，直接在form_row块中添加带样式的外层容器：

{% block form_row %}
    <div style="display:inline">
        <span class="formLabel">
            {{ form_label(form) }}
        </span>
        <span class="formWidget">
            {{ form_widget(form) }}
        </span>
        <span class="formErrors">
            {{ form_errors(form) }}
        </span>
    </div>
{% endblock %}

方案2：单独定制提交按钮的行模板 #

Symfony的SubmitType默认会优先使用submit_row块渲染，在主题中添加该块即可单独控制提交按钮的外层容器：

{% block submit_row %}
    <div style="display:inline">
        {{ form_widget(form) }}
        {{ form_errors(form) }}
    </div>
{% endblock %}

这种方式不会影响其他字段的form_row渲染，仅针对提交按钮生效。

优化建议 #

尽量避免内联样式，改用CSS类提升可维护性：

1. 在表单构建器中设置类名：

'row_attr' => ['class' => 'inline-form-row']

2. 在CSS文件中定义样式：

.inline-form-row {
    display: inline;
}

内容的提问来源于stack exchange，提问作者Jean François Manatane