5

我需要将复选框组合在一起，但分为 2 列。在下图中，我创建了 2 个不同的字段集。我知道这不是很语义化，但它显示了我想要实现的布局。

在此处输入图像描述

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

我希望复选框看起来像是属于一个部分。我可以去掉绿色左上角、粉红色左下角和蓝色右下角的圆角。我需要为此使用标准 CSS 覆盖还是有更优雅的方法？谢谢

4

2 回答 2

4

我想你想看看：http Layout Grids: //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/

于 2012-04-26T12:41:12.367 回答
1

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

您可以通过将适当的 css 'border radius' 值设置/覆盖为零来更进一步，以消除您需要的任何角，以摆脱接触的圆角并获得更一致的外观。

根据示例：

<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 和 css 分开，但这是一个例子。:-)

于 2013-11-25T18:17:42.253 回答