带有字段的 JQuery Mobile 单选按钮在桌面上包含宽度问题答案

【问题标题】：JQueryMobile radio buttons with fieldcontain width issue on desktop带有字段的 JQuery Mobile 单选按钮在桌面上包含宽度问题
【发布时间】：2014-01-26 01:21:39
【问题描述】：

我有 4 个水平单选按钮，它们在 320X300 像素（智能手机）上看起来不错，但我希望它在台式机或平板电脑上看起来不错。如何使图例文本更宽或全部适合 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>

【问题讨论】：

你能不能展示一下你想要的样子？希望它“看起来不错”显然是主观的。这个问题对你还有意义吗？

标签： jquery mobile radio-button

【解决方案1】：

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

演示：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/

【讨论】：