我的页面上有一个水平单选按钮小部件,如下所示:
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input name="tool-selector" id="tool-selector-1" value="1" type="radio" checked>
<label for="tool-selector-1">1</label>
<input name="tool-selector" id="tool-selector-2" value="2" type="radio">
<label for="tool-selector-2">2</label>
<input name="tool-selector" id="tool-selector-3" value="3" type="radio">
<label for="tool-selector-3">3</label>
<input name="tool-selector" id="tool-selector-4" value="4" type="radio">
<label for="tool-selector-4">4</label>
<input name="tool-selector" id="tool-selector-5" value="5" type="radio">
<label for="tool-selector-5">5</label>
<input name="tool-selector" id="tool-selector-6" value="6" type="radio">
<label for="tool-selector-6">6</label>
<input name="tool-selector" id="tool-selector-7" value="7" type="radio">
<label for="tool-selector-7">7</label>
</fieldset>
</form>
我希望它始终跨越页面宽度,而不是在屏幕过宽时不到达行尾,或者在屏幕过窄时溢出到下一行。这可能吗?如果可以,怎么办?
谢谢。
工作示例:http : //jsfiddle.net/Gajotres/4KahY/
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input name="tool-selector" id="tool-selector-1" value="1" type="radio" checked>
<label for="tool-selector-1">1</label>
<input name="tool-selector" id="tool-selector-2" value="2" type="radio">
<label for="tool-selector-2">2</label>
<input name="tool-selector" id="tool-selector-3" value="3" type="radio">
<label for="tool-selector-3">3</label>
<input name="tool-selector" id="tool-selector-4" value="4" type="radio">
<label for="tool-selector-4">4</label>
<input name="tool-selector" id="tool-selector-5" value="5" type="radio">
<label for="tool-selector-5">5</label>
<input name="tool-selector" id="tool-selector-6" value="6" type="radio">
<label for="tool-selector-6">6</label>
<input name="tool-selector" id="tool-selector-7" value="7" type="radio">
<label for="tool-selector-7">7</label>
</fieldset>
</form>
.ui-controlgroup-controls {
width: 100% !important;
}
// This number shoud reflect 100 divided with number of controlgroup radio elements
.ui-controlgroup-controls .ui-radio {
width: 14.25% !important;
}
.ui-controlgroup-controls .ui-radio label {
text-align: center !important;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句