css - 格式化列和行中的元素

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。当然您也可以使用像素值)

这会将复选框及其标签分布在三列中。但是，如果长标签横跨多行，您可能会遇到分布问题(试试看我的意思)。

为防止这种情况，给每第 3 列附加类 newline:

<div class="checkbox newline">

并在 CSS 中定义:

div.checkbox.newline { clear: left }