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 }

Answer 2

CSS中的列计数属性非常有用。如果你在每个表单元素之后放置一个换行符，你可以做一个非常干净的演示文稿。此外，通过添加<span style="white-space: nowrap;">，它会将标签附加到复选框元素

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
    -webkit-column-count: 6; /* Chrome, Safari, Opera */
    -moz-column-count: 6; /* Firefox */
    column-count: 6;
}
</style>
</head>
<body>

<p>Here are a bunch of check boxes and their labels laid out nicely
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>

<div class="newspaper">

<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>

</div>

</body>
</html>

格式化列和行中的元素

2 个答案: