jquery-mobile - 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/

但是，如果您对一位 parent 没问题 fieldset和两个嵌套的、分组的字段集...然后你可以得到这样的解决方案: http://jsfiddle.net/shanabus/hcyfK/1/