如何在Yii2表单字段中实现多选复选框横向对齐

别担心，我来帮你搞定这个横向排列的需求！Yii2的checkboxList默认是垂直排列的，因为生成的每个选项都包裹在<li>标签里，默认是块级元素。这里有两种简单的方法实现横向排列：

方法1：利用Bootstrap内置类（推荐，如果你用了Bootstrap） #

Yii2默认集成了Bootstrap，直接给每个复选框项加上checkbox-inline类就行，修改你的代码如下：

<?= $form->field($model, 'ReportSelection[]')->checkboxList(
    ['1' => 'Channel1', '2' => 'Channel2','3'=>'Channel3','4'=>'Channel4','5' => 'Channel5', '6' => 'Channel6','7'=>'Channel7','8'=>'Channel8','9' => 'Channel9','10' => 'Channel10', '11' => 'Channel11','12'=>'Channel12','13'=>'Channel13','14' => 'Channel14', '15' => 'Channel15','16'=>'Channel16','17'=>'Channel17','18' => 'Channel18','19'=>'Channel19','20'=>'Channel20','21'=>'Channel21','22' => 'Channel22', '23' => 'Channel23','24'=>'Channel24','25'=>'Channel25','26' => 'Channel26', '27' => 'Channel27','28'=>'Channel28','29'=>'Channel29','30' => 'Channel30', '31' => 'Channel31','32'=>'Channel32'],
    [
        'multiple' => 'multiple',
        'itemOptions' => ['class' => 'checkbox-inline'] // 新增这个配置
    ]
); ?>

checkbox-inline类会自动把每个选项设置为display: inline-block，让它们横向并排，还自带合适的间距，非常省心。

方法2：自定义CSS（适合不用Bootstrap的场景） #

如果你的项目没使用Bootstrap，那就自己写CSS来控制布局。首先给整个字段组加个自定义类，然后选中内部的列表项设置样式：

第一步：修改PHP代码，添加字段类 #

<?= $form->field($model, 'ReportSelection[]', ['options' => ['class' => 'horizontal-checkboxes']])->checkboxList(
    ['1' => 'Channel1', '2' => 'Channel2','3'=>'Channel3','4'=>'Channel4','5' => 'Channel5', '6' => 'Channel6','7'=>'Channel7','8'=>'Channel8','9' => 'Channel9','10' => 'Channel10', '11' => 'Channel11','12'=>'Channel12','13'=>'Channel13','14' => 'Channel14', '15' => 'Channel15','16'=>'Channel16','17'=>'Channel17','18' => 'Channel18','19'=>'Channel19','20'=>'Channel20','21'=>'Channel21','22' => 'Channel22', '23' => 'Channel23','24'=>'Channel24','25'=>'Channel25','26' => 'Channel26', '27' => 'Channel27','28'=>'Channel28','29'=>'Channel29','30' => 'Channel30', '31' => 'Channel31','32'=>'Channel32'],
    ['multiple' => 'multiple']
); ?>

第二步：添加CSS样式 #

.horizontal-checkboxes .checkbox-list li {
    display: inline-block;
    margin-right: 15px; /* 可选：给每个选项之间加间距 */
    margin-bottom: 5px; /* 可选：如果选项太多换行，给行之间加间距 */
}

为什么你之前的CSS没生效？ #

Yii2生成的checkboxList结构大概是这样的：

<div class="form-group field-model-reportselection">
    <label class="control-label">ReportSelection</label>
    <ul id="model-reportselection" class="checkbox-list">
        <li><label><input type="checkbox" name="Model[ReportSelection][]" value="1"> Channel1</label></li>
        <li><label><input type="checkbox" name="Model[ReportSelection][]" value="2"> Channel2</label></li>
        <!-- 更多选项... -->
    </ul>
</div>

你之前的CSS可能只选中了<input>标签，但真正控制排列的是外层的<li>元素，所以必须给<li>设置display: inline-block才能实现横向排列。

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