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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Jquery Mobile中拉伸水平单选按钮相关的知识,希望对你有一定的参考价值。

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

<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/但仍然无法正常工作。

答案

试试这个:

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

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

另一答案

您必须使.row_b的内部容器(.ui-controlgroup-controls)(特别是在应用jqm的data-role =“controlgroup”时)填充整个屏幕宽度。

因此,尝试:

.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;
}

以上是关于在Jquery Mobile中拉伸水平单选按钮的主要内容,如果未能解决你的问题,请参考以下文章

jQuery mobile 中的多个单选按钮控件组

单击单选按钮使用 jquery Mobile 显示图像

jquery mobile如何仅禁用单选按钮组的一种选择

jquery mobile设置单选按钮组的选定值

带有jquery mobile的全宽水平按钮?

单选按钮覆盖标签