css - Cakephp 水平复选框

Question

我正在尝试获取一个复选框列表以跨页面而不是垂直显示我已经阅读了 SO 和其他人的许多帖子，看来我做的是正确的，但我的复选框拒绝水平 float 。我尝试了多种解决方案，包括内联样式和在代码中分配不同的类。有人可以发现我的错误吗？

蛋糕代码

<?php
    echo $this->Form->input('Check.Assessment', array(   'multiple' => 'checkbox')); // checkboxes
?>

生成的 HTML

<div class='assessments'>
<div class="input select"><label for="CheckAssessment">Assessment</label><input type="hidden" name="data[Check][Assessment]" value="" id="CheckAssessment"/>

<div class="checkbox"><input type="checkbox" name="data[Check][Assessment][]" value="1" id="CheckAssessment1" /><label for="CheckAssessment1">Blah</label></div>
<div class="checkbox"><input type="checkbox" name="data[Check][Assessment][]" value="2" id="CheckAssessment2" /><label for="CheckAssessment2">Blah Blah</label></div>
<div class="checkbox"><input type="checkbox" name="data[Check][Assessment][]" value="3" id="CheckAssessment3" /><label for="CheckAssessment3">Blah Blah Blah</label></div>
<div class="checkbox"><input type="checkbox" name="data[Check][Assessment][]" value="4" id="CheckAssessment4" /><label for="CheckAssessment4">Blah Blah Blah Blah</label></div>
</div>      

CSS

.checkbox
{
float: left;
padding-right: 15px;
}

Answer 1

我为您修复了一个不错的演示 fiddle https://jsfiddle.net/wgrLfxg3/15/

像这样修复了 css display:box

.checkbox
{

padding-right: 15px;
    display:box;
}

如果你想要 div 之间的边距，只需添加

padding-bottom:10px 

或类似的东西。

如果你想让它们向左浮动就设置

left:0;

编辑:

如果你需要让它们内联，只需添加 display:inline-block，这里是这个的演示

https://jsfiddle.net/wgrLfxg3/19/