在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中拉伸水平单选按钮的主要内容,如果未能解决你的问题,请参考以下文章