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

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按钮:在上面的例子中,我设法通过试验和错误来适应水平单选按钮.

怎么能在代码中完成???

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