Question

<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 &#8362;</label>
    <input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="בינוני"   checked="checked"/>
    <label for="radio-view-b" >בינוני: 6.30 &#8362;</label>
    <input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="קטן"  />
    <label for="radio-view-c" >קטן: 5.70 &#8362;</label>
  </fieldset>
</div>

Jquery Mobile Radio按钮：在上面的例子中，ave设法使水平单选按钮适合于试错法。

如何在代码中完成？

Answer 1

我假设您希望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 &#8362;</label>
        <input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="בינוני" checked="checked"/>
        <label for="radio-view-b" >בינוני: 6.30 &#8362;</label>
        <input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="קטן"  />
        <label for="radio-view-c" >קטן: 5.70 &#8362;</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;
}

<强> DEMO

Answer 2

您应该添加data-inline="true"。检查jQuery Mobile站点上单选按钮的演示。

jquery移动单选按钮组适合100％的宽度

2 个答案: