0

我有一个包含两个带有 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%;
}

编辑当我从字段集元素中删除 data-role="controlgroup" 时，一切正常。但是单选按钮没有得到数据类型=“水平”。

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

4

1 回答 1

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/

于 2013-06-04T13:44:24.427 回答