0

我正在使用 JQM 创建一个移动应用程序，并尝试将分组在具有 data-role="fieldcontain" 的字段集中的单选按钮居中。我发现如果我使用 JQM 1.2.0，单选按钮不会居中，而是堆叠在一起（见图）。切换回 JQM 1.0.0 解决了这个问题，并且按钮完全居中（见图）。有关如何纠正此问题的建议？提前致谢。

    <div data-role="header">
    </div>

    <div data-role="content">
       <div id="fieldcontain-wrapper" style="display:table;margin:0 auto;">
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                        <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
                        <label for="radio-choice-c">&nbsp;&nbsp;Home&nbsp;&nbsp;</label>
                        <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
                        <label for="radio-choice-d">&nbsp;&nbsp;Away&nbsp;&nbsp;</label>
                </fieldset>
            </div>
       </div>
    </div>

JQM 1.2.0 JQM 1.0

4

1 回答 1

1

这是由您的包装器 div 引起的一个奇怪的 jQM 错误。这个 css 将修复它：

.ui-controlgroup-controls {
    width: 100% !important;
}

出于某种原因，在达到相同的最小宽度后，ui-controlgroup-controls 的宽度变为 78%。真的很奇怪。

这是一个示例，删除一个 css 块以查看其行为的缺失。 http://jsfiddle.net/Gajotres/vHy9U/

于 2012-12-29T09:39:45.870 回答