Symfony 2.3：列表中复选框与标签的CSS样式及嵌套问题

Hey there! Let's tackle this Symfony 2.3 form layout issue you're having. You want either checkboxes nested inside their <label> tags, or a CSS-based layout where checkboxes and labels sit inline, with the second pair wrapping to a new line. Here are two solid approaches to get you there:

Method 1: Nest Checkboxes Inside Labels via Custom Form Theme #

Symfony 2.3's default form rendering doesn't nest checkboxes inside labels by default, but you can override this with a custom form theme. This is the cleanest, most semantic approach since it makes the label clickable anywhere (not just the text) and fixes your layout at the template level.

1. First, create a custom form theme file in your project, e.g., app/Resources/views/Form/fields.html.twig
2. Add these blocks to override the checkbox and expanded choice rendering:

{% block choice_widget_expanded %}
    {% spaceless %}
        <div {{ block('widget_container_attributes') }}>
            {% for child in form %}
                <div class="checkbox-group">
                    {{ form_widget(child) }}
                </div>
            {% endfor %}
        </div>
    {% endspaceless %}
{% endblock %}

{% block checkbox_widget %}
    {% spaceless %}
        <label>
            <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
            {{ label|raw }}
        </label>
    {% endspaceless %}
{% endblock %}

3. Tell your template to use this custom theme by adding this line at the top of your page template (before rendering the form):

{% form_theme myForm 'Form/fields.html.twig' %}

Now when you render {{ form_widget(myForm.reasons) }}, each checkbox will be wrapped directly inside its <label> tag, making them naturally inline and fully clickable.

Method 2: Adjust Layout with CSS (No Template Changes) #

If you don't want to modify the form theme, you can fix the layout purely with CSS. First, let's assume Symfony's default rendering outputs HTML like this for your checkboxes:

<div id="myForm_reasons" class="checkbox">
    <div>
        <input type="checkbox" id="myForm_reasons_0" name="myForm[reasons][]" value="reason1">
        <label for="myForm_reasons_0">Reason 1</label>
    </div>
    <div>
        <input type="checkbox" id="myForm_reasons_1" name="myForm[reasons][]" value="reason2">
        <label for="myForm_reasons_1">Reason 2</label>
    </div>
</div>

Add this CSS to make checkboxes and labels inline, and force the second pair to wrap to a new line:

/* Make each checkbox + label container inline */
#myForm_reasons div {
    display: inline-block;
    margin-right: 20px; /* Add some spacing between items */
}

/* Force the second checkbox container to wrap */
#myForm_reasons div:nth-child(2) {
    display: block;
    margin-top: 10px; /* Optional: Add spacing above the wrapped item */
}

/* Optional: Align checkboxes and labels perfectly */
#myForm_reasons input[type="checkbox"],
#myForm_reasons label {
    vertical-align: middle;
}

This will keep the first checkbox and label on the same line, and push the second pair to a new line—no template changes needed.

Pick the method that fits your workflow best: the form theme approach is more semantic and maintainable long-term, while the CSS fix is quick if you just need a layout tweak.

内容的提问来源于stack exchange，提问作者pirmax