jquery - 字段集控制组中单选按钮网格的宽度 jquery mobile

Question

我有一个表单，其中包含两个带有 raio 按钮的网格，并试图将其调整为标题和其他元素的宽度。我也会感谢任何好的资源，在那里我可以学习使用 jQuery Mobile 进行样式设置。使用 jquery 1.9.1 和 jquery mobile 1.3.1

我的代码:http://jsfiddle.net/Nk4bz/

<div data-role='page' id='bookingPage'>
        <div data-role='header' id='hBooking' class='hBooking'
            data-nobackbtn=true>
            <h1>Booking</h1>
        </div>
        <div data-role='content' id='bookingContent' class='bookingContent'>

            <form id="bookingForm">


                <div id="select">
                    <select name="selectOrder" id="selectOrder"
                        data-native-menu="false">
                        <option value='choose'>Auftrag auswählen</option>
                    </select>                   
                </div>

                <div id='timeRadios' class='timeRadios'>
                    <fieldset id="hours" class="ui-grid-b" data-type="horizontal"
                        data-role="controlgroup">
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-b" id="radio-choice-1"
                                value="1" /> <label for="radio-choice-1">1</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-b" id="radio-choice-2"
                                value="2" /> <label for="radio-choice-2">2</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-b" id="radio-choice-3"
                                value="3" /> <label for="radio-choice-3">3</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-b" id="radio-choice-4"
                                value="4" /> <label for="radio-choice-4">4</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-b" id="radio-choice-5"
                                value="5" /> <label for="radio-choice-5">5</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-b" id="radio-choice-6"
                                value="6" /> <label for="radio-choice-6">6</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-b" id="radio-choice-7"
                                value="7" /> <label for="radio-choice-7">7</label>
                                </div>
                                <div class="ui-block-b">
                                 <input
                                type="radio" name="radio-choice-b" id="radio-choice-8" value="8" />
                            <label for="radio-choice-8">8</label>
                            </div>
                            <div class="ui-block-b">
                             <input type="radio"
                                name="radio-choice-b" id="radio-choice-9" value="9" /> <label
                                for="radio-choice-9">9</label>
                        </div>
                    </fieldset>

                    <fieldset id="minutes" class="ui-grid-b" data-type="horizontal"
                        data-role="controlgroup">
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-d" id="radio-choice-15"
                                value="15"> <label for="radio-choice-15">15</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-d" id="radio-choice-30"
                                value="30"> <label for="radio-choice-30">30</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-d" id="radio-choice-45"
                                value="45"> <label for="radio-choice-45">45</label>

                        </div>
                    </fieldset>
                </div>
                <div>
                    <input id="bookingSubmit" type="submit" value="Buchen" />
                </div>
            </form>

        </div>
        <div data-role='footer' id='fBooking' class='fBooking'></div>
    </div>

和 CSS:

.ui-controlgroup-controls
{
    width:100%;
}
.ui-radio {
    width:100%;
}

编辑 当我从 fieldset 元素中删除 data-role="controlgroup"时，一切正常。但是单选按钮没有得到 data-type="horizo​​ntal"。

EDIT2 找到了解决方法。从 fieldset 元素中删除了 class="ui-grid-b"并在包含网格的 fieldset 中添加了一个带有此类的 div。 Hier 是工作示例。 http://jsfiddle.net/Nk4bz/1/

Answer 1

解决方案是从 fieldset 元素中删除 class="ui-grid-b"并在 fieldset 中添加一个包含此类的 div 来包裹网格。像这样:

<fieldset id="minutes" data-type="horizontal" data-role="controlgroup">
<div class="ui-grid-b">

Hier 是工作示例。

http://jsfiddle.net/Nk4bz/1/