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/

Answer 2

shanabus用他的嵌套分组解决方案给出了一个很好的答案： http://jsfiddle.net/shanabus/hcyfK/1/

你可以更进一步，通过设置/覆盖适当的css'边框半径'值为零，你需要任何角落，以摆脱触摸圆角并获得更一致的外观。

根据例子：

<label for="radio-choice-1" style="border-top-right-radius: 0">Cat</label>
<label for="radio-choice-2" style="border-bottom-right-radius: 0">Dog</label>
<label for="radio-choice-3" style="border-top-left-radius: 0">Hamster</label>
<label for="radio-choice-4" style="border-bottom-left-radius: 0">Lizard</label>

是的，我是一个坏人，因为我没有分开html＆amp; css，但这是一个例子。 ： - ）