停止jQuery移動水平單選按鈕從打破或環繞

Question

我試圖創建兩個水平單選按鈕組並排使用HTML從jQuery Mobile演示頁面。
問題在於單選按鈕會斷開，並在它們之間仍有足夠的空間時開始換行到下一行。有沒有一種方法可以讓他們不要纏繞，直到兩個屏幕之間幾乎沒有空間？

你可以看到正在發生的事情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/

在這張截圖的提琴的源代碼，你可以看到這些 ：