格式元素和行

为了避免重新发明轮子，我生成使用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更改标记）？

来源

2010-08-02 NullUserException

您可以使用下面的CSS：

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

（1％是四舍五入的问题;减少宽度，增加margin-right，你认为合适，您还可以使用过程中的像素值。）

这将在三列中分配复选框及其标签。但是，对于包装多行的长标签，您可能会遇到分发问题（试试看看我的意思）。

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

<div class="checkbox newline">

和CSS定义：在CSS

div.checkbox.newline { clear: left }

来源

2010-08-02 20:07:03

工程很棒;不得不在其他地方改变一些CSS，但形式仍然看起来好 – NullUserException 2010-08-02 20:29:52

感谢换行提示，为我节省了一些头痛 – Mercurybullet 2012-06-14 22:30:22

的列数属性是非常有益的。如果你在每个表单元素之后放一个换行符，你可以做一个非常干净的表示。此外，通过添加<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>

来源

2016-05-16 01:01:07 CAtoOH

格式元素和行

回答

相关问题