jquery mobile单选按钮组适合100％的宽度答案

【问题标题】：jquery mobile radio button group to fit 100% of widthjquery mobile单选按钮组适合100％的宽度
【发布时间】：2014-04-24 15:20:08
【问题描述】：

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

怎么可能用代码来完成？？？

【问题讨论】：

那么......你到底想在这里发生什么？
我希望水平单选按钮“自动”而不是手动（使用 84% 字体大小）适应屏幕宽度

标签： jquery-mobile

【解决方案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

【讨论】：

你是个天才！谢谢 99.9% :) 我现在只有一个小问题，因为“noweap”导致文本被截断。（它生成一个'...'而不是文本......我怎样才能让文本自动调整大小以适应按钮的宽度 - 以一种方式，所有三个按钮都具有相同的字体大小，但根据如果我足够清楚的话，“最长的文字”......
使用 CSS，您可以对设备宽度进行媒体查询，并为更小的宽度应用更小的字体：jsfiddle.net/ezanker/DD6YC/3。除此之外，您还需要使用 JavaScript。见github.com/davatron5000/FitText.js，或stackoverflow.com/questions/3401136/…
你是一个正义的人。如果我有一个女儿，我会让她嫁给你。再次，非常感谢您的帮助。我看到了您上传到 jsfiddle 的示例，这正是我想要的。出于某种原因，尽管我从您的示例中复制粘贴了@media 代码，但它在我的浏览器（chrome、firefox）中不起作用。不知道原因。无论如何，非常感谢！
对我来说，媒体查询在 Chrome 和 Firefox 中都有效。祝你好运！

【解决方案2】：

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

【讨论】：

我将演示用作我的第一个参考点。他们都是伟大的。但他们没有提供解决方案。此外，我尝试将数据内联添加到代码中的每个标签中，但没有效果。
感谢编辑。我是通过 SO 移动应用发布的。