2011-08-12 47 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/