使用JQM 1.2.0对FieldSet进行居中

Question

我正在使用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>

Answer 1

这是由你的包装div引起的一个奇怪的jQM错误。这个CSS将解决它：

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

由于某种原因，在达到相同的最小宽度后，ui-对照组 - 对照的宽度变为78％。真奇怪。

这是一个例子，删除一个css块以查看其行为不足。 http://jsfiddle.net/Gajotres/vHy9U/