Question

我有一个包含两个带有raio按钮的网格的表单，并尝试将其加到标题和其他元素的宽度上。此外，我将欣赏任何好的资源，我可以通过jquery mobile了解样式。使用jquery 1.9.1和jquery mobile 1.3.1

<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 =＆＃34; controlgroup＆＃34;从fieldset元素一切正常。但是，无线电按钮不能获得数据类型=＆＃34;水平＆＃34;。

EDIT2 找到解决问题的方法。删除了类=＆＃34; ui-grid-b＆＃34;来自fieldset元素，并在包含网格的fieldset中添加了一个div。希尔就是一个有效的例子。 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/

fieldset控制组jquery mobile中单选按钮网格的宽度

1 个答案: