我有餐厅美食列表（HABTM）-当用户添加餐厅时，他们会从所有美食复选框中进行选择。
复选框输入设置为浮动：左；带有填充/边距。。。等等，一切看起来都很好——一个漂亮的复选框网格。
问题：复选框按字母顺序显示，但不是按照用户期望的方式显示的——它们在重复行中从左到右排列（就像您期望的那样，使它们全部浮动）。
我怎样才能使它们按字母顺序排列，但按垂直列排列？所以按字母顺序，你可以从上到下阅读，然后转到下一列。
我可以这样做，只需找到普通的PHP，但在CakePHP中，我显示复选框的调用只是：
<?php echo $this->Form->input('RestaurantCuisine', array('multiple'=>'checkbox')); ?>
添加：
JS FIDDLE HERE（html大部分是不可编辑的，因为它是由CakePHP生成的-如果需要，可以编辑CakePHP回声-但这不能在小提琴中）
基于这些评论，我创建了一个有望接受的jQuery解决方案。
请参阅：http://jsfiddle.net/svRmL/
var $element = $('#cuisines');
var $elementWidth = $element.find(' > .checkbox').outerWidth(true),
elementCount = $element.find(' > .checkbox').length,
$boxes = $element.find(' > .checkbox');
/* just for debug */
$boxes.each(function(i) {
$(this).find('label').html(i);
});
//set resize function
$(window).resize(function() {
var perRow = Math.floor($element.width() / $elementWidth),
i, j, $thisColumn, inc;
$boxes.appendTo($element); //move elements out of columns from previous resize
$('.tempColumn').remove(); //destroy old columns
for (i = 0; i < perRow; i++) {
$thisColumn = $('<div class="tempColumn" />').appendTo($element).css({
width: $elementWidth,
float: 'left'
});
inc = Math.ceil(elementCount / perRow);
for (j = inc * i; j < inc * (i + 1); j++) {
$boxes.eq(j).appendTo($thisColumn);
}
}
}).resize(); //trigger resize function immediately