在 Jquery Mobile 中拉伸水平单选按钮答案

【问题标题】：Stretching Horizontal Radio Button In Jquery Mobile在 Jquery Mobile 中拉伸水平单选按钮
【发布时间】：2013-01-08 11:26:28
【问题描述】：

如何将水平单选按钮拉伸到全宽。

<fieldset data-role="controlgroup" data-type="horizontal"  class="row_b"> 


 <input type="radio" name="q2" id="q2_0" value="0" checked="checked" />
            <label for="q2_0">C</label>
            <input type="radio" name="q2" id="q2_1" value="1" />
            <label for="q2_1">s</label>
            <input type="radio" name="q2" id="q2_2" value="2" />
            <label for="q2_2">P</label>


    </fieldset>

CSS

.row_b .ui-btn {
    text-align: center;
    width: 33.3%;
}

检查此链接后尝试为 3 个单选按钮设置上述方法.. http://jsfiddle.net/6rCmY/1/ 但仍然无法正常工作。

【问题讨论】：

标签： jquery html jquery-ui jquery-mobile

【解决方案1】：

试试这个：

.row_b .ui-btn {
    text-align: center;
    width: 33%;
}

我将宽度参数更改为 33%，经过测试，它们显示正确。

【讨论】：

如果这回答了您的问题，请标记为其他成员的回答 (10x)。

【解决方案2】：

你必须让你的内部容器（.ui-controlgroup-controls）的.row_b（特别是当你应用jqm的data-role="controlgroup"）填满整个屏幕宽度。 p>

因此，请尝试：

.row_b .ui-controlgroup-controls { 
    width: 100%; 
}
.row_b .ui-btn { 
    text-align: center;
    width: 33.3333%;
}

CSS3 替代方案：

.row_b .ui-controlgroup-controls {
    display:-moz-box;
    display:-webkit-box;
    display:box;
    -moz-box-orient:horizontal;
    -webkit-box-orient:horizontal;
    box-orient:horizontal;
    width: 100%;
}
.row_b .ui-radio {
    text-align: center;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
}

【讨论】：