2011-08-12 46 views
1

我有4个单选按钮水平,他们在320X300px(智能手机)上看起来不错,但我希望它在桌面或平板电脑上看起来不错。如何让图例文字更宽或全部适合2列。我曾尝试使用网格,但似乎什么都不做。我怀疑我只是需要一些CSS,但我不知道该怎么做。JQueryMobile单选按钮与桌面上的fieldcontain宽度问题

<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> 
+0

你能否展示你想要的样子?希望它“看起来不错”明显是主观的。这个问题仍然与你有关吗? –

回答

0

您可以尝试两行而不是列。

演示:http://jsfiddle.net/6rCmY/1

我删除了legend和移动的文字了fieldset,并推翻了.ui-btn类的默认CSS为.row_b

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

或者只是移动文本出来一个孩子的字段集,根本不要更改CSS ...

演示:http://jsfiddle.net/GsUEz/1/