从破坏或包装中停止jQuery Mobile水平单选按钮

Question

我尝试使用jQuery Mobile演示页面中的html并排创建两个水平单选按钮组。
问题是，当它们之间仍有足够的空间时，单选按钮会断开并开始换行到下一行。有没有办法可以让他们不要换行，直到两个小屏幕上几乎没有空格？

您可以在this fiddle.

中查看正在发生的事情

另外，我想将第二个广播组合对齐，但是将text-align:right或position:relative; right:0px添加到#SecondGroup并没有任何效果。

这是我的代码：

             <div data-role="fieldcontain">
                    <fieldset  class="ui-grid-a ">

                        <div class="ui-block-a" id="FirstGroup">
                            <fieldset data-role="controlgroup" data-mini="true" data-theme="b" data-type="horizontal" >
                                <input type="radio" name="same" id="sold" value="on" checked="checked">
                                <label for="sold">One</label>
                                <input type="radio" name="same" id="active" value="off">
                                <label for="active">Two</label>
                            </fieldset>
                        </div>                      

                        <div class="ui-block-b" id="SecondGroup">
                            <fieldset data-role="controlgroup" data-mini="true" data-theme="b" data-type="horizontal" >
                                <input type="radio" name="conditionSame" id="all" value="on" checked="checked">
                                <label for="all">One</label>
                                <input type="radio" name="conditionSame" id="used" value="on" >
                                <label for="used">Two</label>
                                <input type="radio" name="conditionSame" id="new" value="on">
                                <label for="new">Three</label>
                            </fieldset>

                        </div>                          

                    </fieldset>
                </div>

谢谢。

Answer 1

您的代码中有不可见的空格 （请参阅下面的屏幕截图）。取下它们后，包装就可以了。

小提琴：http://jsfiddle.net/bunoxL4r/3/

在您的小提琴源的屏幕截图中，您可以看到这些 ：