<div data-role="fieldcontain" style="font-size: 84%" > <!-- style="width: 48% ; float: right" -->
<fieldset data-role="controlgroup" data-type="horizontal" data data-mini="false" data-theme="b" style="width: 98%; " data-corners="false"> <!-- strength -->
<legend style="text-align: center ; ">גודל</legend>
<input type="radio" name="radio-strength" id="radio-view-a" value="גדול" data class="blabla" style="background-color: #BF8F54;"/>
<label for="radio-view-a" >גדול: 10.50 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="בינוני" checked="checked"/>
<label for="radio-view-b" >בינוני: 6.30 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="קטן" />
<label for="radio-view-c" >קטן: 5.70 ₪</label>
</fieldset>
</div>
Jquery 移动单选按钮: 在上面的示例中,我通过反复试验设法使水平单选按钮完全适合。
如何用代码完成???
请您参考如下方法:
我假设您希望 CSS 使控制组看起来像图像?
如果是这样,这里是您的 HTML,其中删除了所有样式并修复了一些拼写错误:
<div id="myGroup" data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" data-theme="b" data-corners="false"> <!-- strength -->
<legend >גודל</legend>
<input type="radio" name="radio-strength" id="radio-view-a" value="גדול" class="blabla" style="background-color: #BF8F54;"/>
<label for="radio-view-a" >גדול: 10.50 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="בינוני" checked="checked"/>
<label for="radio-view-b" >בינוני: 6.30 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="קטן" />
<label for="radio-view-c" >קטן: 5.70 ₪</label>
</fieldset>
</div>
我在 fieldcontain 中添加了一个 ID,这样我们就可以将 CSS 规则限制在这个容器中:
#myGroup {
font-size: 84%;
}
#myGroup .ui-controlgroup-label{
float: none;
display: block;
text-align: center;
width: 100%;
}
#myGroup .ui-controlgroup-label legend{
font-weight: bold;
font-size: 130%;
width: 100%;
margin-bottom: 8px;
}
#myGroup .ui-controlgroup-controls {
float: none;
display: block;
width: 100%;
}
#myGroup .ui-radio{
width: 33.33%;
}
#myGroup .ui-radio label{
text-align: center;
white-space: nowrap;
}