Are jQuery mobile flags grouped in two vertical columns?

Question

I need to group a checkbox together, but in 2 columns. In the image below ive 2 different fields are created. I know this is not very semantic, but it displays the layout I want to achieve.

Is there a standard jQuery Mobile way to do this?

I want the checkboxes to look like they belong to the same section. I could remove the rounded order of the green upper left, pink lower left and cyan lower right. Do I need to use standard CSS overrides for this, or is there a more elegant way? thank

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 -->

UPDATE

, , , 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 css, .: -)