格式化列和行中的元素

Question

为了避免重新发明轮子,我使用CakePHP的表单助手生成一个表单,它创建以下标记:

    <div class="input select"><label for="ReportFruit">Fruit</label>
        <input type="hidden" name="data[Report][Fruit]" value="" id="ReportFruit" /> 

<div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="0" id="ReportFruit0" /><label for="ReportFruit0">Banana</label></div> 
<div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="1" id="ReportFruit1" /><label for="ReportFruit1">Apple</label></div> 
<div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="2" id="ReportFruit2" /><label for="ReportFruit2">Pear</label>
...
</div> 
</div>?

这会以这种格式生成一堆复选框:

[] Banana
[] Apple
[] Pear
[] ...

我想格式化它们,所以它们显示如下:(理想情况下,我仍然可以设置每行的选项数量,但如果没有它也很好)

[] Banana    [] Apple     [] Pear
[] Mango     [] Lemon     [] ...

我可以使用CSS完成此操作,还是必须使用JS操作DOM(或者在输出之前用PHP更改标记)？

Answer 1

您可以使用以下CSS:

div.checkbox { float: left; width: 31%; margin-right: 1% }

(1%用于舍入问题;减小宽度并根据需要增加margin-right.当然,您也可以使用Pixel值)

这会将复选框及其标签分布在三列中.但是,如果长标签包含多行,您可能会遇到分发问题(尝试看看我的意思).

为了防止这种情况,请为每个第3列提供额外的类newline:

<div class="checkbox newline">

并在CSS中定义:

div.checkbox.newline { clear: left }