jQuery移动复选框分为2个垂直列？

Question

我需要将复选框组合在一起但在2列中.在下面的图像中,我创建了2个不同的字段集.我知道这不是非常语义,但它显示了我想要实现的布局.

是否有标准的jQuery Mobile方法来做到这一点？

我希望复选框看起来像属于一个部分.我可以移除绿色左上角的粉圆形,左下方为粉红色,右下方为蓝色.我是否需要为此使用标准CSS覆盖,还是有更优雅的方式？谢谢

Answer 1

我想你想看看Layout Grids：http://jquerymobile.com/test/docs/content/content-grids.html

<div class="ui-grid-a">
    <div class="ui-block-a">
             <label><input type="checkbox" name="checkbox-1" /> Any</label>
             <label><input type="checkbox" name="checkbox-1" /> Red </label>
        </div>
    <div class="ui-block-b">
             <label><input type="checkbox" name="checkbox-1" /> Green </label>
             <label><input type="checkbox" name="checkbox-1" /> Black </label>
        </div>
</div><!-- /grid-a -->

更新

根据您的评论，不，您不能将两个单独的列分组为一个fieldset。

字段集data-role="controlgroup"上的 删除边距和填充以产生分组效果，但最终得到的结果是这样的： http: //jsfiddle.net/shanabus/qNYPh/1/

但是，如果您可以接受一个父级fieldset和两个嵌套、分组、字段集...那么您最终可以得到如下解决方案：http ://jsfiddle.net/shanabus/hcyfK/1/