Радиокнопки JQueryMobile с вопросом о ширине поля на рабочем столе

Question

У меня 4 переключателя по горизонтали, и они хорошо смотрятся на 320X300px (смартфон), но я хочу, чтобы они хорошо смотрелись на рабочем столе или планшете. Как сделать текст легенды шире или все уместить в 2 столбца. Я пытался использовать сетку, но это, кажется, ничего не делает. Я подозреваю, что мне просто нужно немного CSS, но я не знаю, что делать.

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

Answer 1

Вы можете попробовать две строки вместо столбцов.

Демо: http://jsfiddle.net/6rCmY/1

Я удалил legend, переместил текст из fieldset и переопределил CSS по умолчанию для класса .ui-btn как дочерний элемент .row_b

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

Или просто переместите текст из набора полей и вообще не меняйте CSS ...

Демо: http://jsfiddle.net/GsUEz/1/