JQueryMobile单选按钮在桌面上存在字段包含宽度问题 [英] JQueryMobile radio buttons with fieldcontain width issue on desktop
问题描述
我有4个水平单选按钮,它们在320X300px(智能手机)上看起来不错,但我希望它在台式机或平板电脑上看起来不错.如何使图例文本更宽或全部适合2列.我尝试使用网格,但这似乎无济于事.我怀疑我只需要一些CSS,但我不知道该怎么办.
I have 4 radio buttons horizontal and they look good on 320X300px (smartphone) but I want it to look good on a desktop or tablet. How do I make the legend text wider or all fit in 2 columns. I have tried using a grid but that seems to do nothing. I suspect that I just need some CSS but I do not know what to do.
<div data-role="fieldcontain" >
<fieldset data-role="controlgroup" data-type="horizontal" data-ajax="true" class="row_b" >
<legend>This is a long question that gets wrapped around in a small space on a desktop but it would be great if it occupied more of the wasted space on the right.</legend>
<input type="radio" name="q2" title="Did not apply to me at all" id="q2_0" value="0" />
<label for="q2_0" style="width: 65px;">0</label>
<input type="radio" name="q2" title="Applied to me to some degree, or some of the time" id="q2_1" value="1" />
<label for="q2_1" style="width: 65px;">1</label>
<input type="radio" name="q2" title="Applied to me to a considerable degree, or a good part of time" id="q2_2" value="2" />
<label for="q2_2" style="width: 65px;">2</label>
<input type="radio" name="q2" title="Applied to me very much, or most of the time" id="q2_3" value="3" />
<label for="q2_3" style="width: 65px;">3</label>
</fieldset>
</div>
推荐答案
您可以尝试两行而不是列.
You could try two rows instead of columns.
演示: http://jsfiddle.net/6rCmY/1
我删除了legend
并将文本移出了fieldset
,并覆盖了.ui-btn
类的默认CSS作为.row_b
的子代
I removed the legend
and moved the text out of the fieldset
and overrode the default CSS for the .ui-btn
class as a child of .row_b
.row_b .ui-btn {
text-align: center;
width: 24.5%;
}
或者只是将文本移出字段集而根本不更改CSS ...
Or just move the text out of the fieldset and don't change the CSS at all...
演示: http://jsfiddle.net/GsUEz/1/
这篇关于JQueryMobile单选按钮在桌面上存在字段包含宽度问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!