<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 移动单选按钮: 在上面的示例中,我通过反复试验设法使水平单选按钮完全适合。

如何用代码完成???

请您参考如下方法:

我假设您希望 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


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!