Iphone Safariでラジオボタンを整列する方法

Question

ラジオボタンをラベルの下に水平に整列しようとしています。コードはデスクトップ上のクロムではうまく動作しますが、サファリまたはクロームのいずれかのIphoneでは動作しません。ここでJS Fiddle

<div> 

<div class='m' > 
    <h3 class='m1'>RES</h3> 
    <h3 class='m1'>SAIL</h3> 
    <h3 class='m1'>Crew</h3> 
    <h3 class='m1'>XCL</h3> 
</div> 

    <div class='m'> 
     <input class='n1' type="radio" name="rsx" id="r" value="res"> 
     <input class='n1' type="radio" name="rsx" id="r" value="sail"> 
     <select id='n2' name="crewopen"> 
     <option value="">&nbsp;</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3 </option> 
     <option value="4">4 </option> 
     <option value="5">5 </option> 
     <option value="6">6 </option> 

     </select> 
     <input class='n1' type="radio" name="rsx" id="r" value="xcl"> 
    </div> 

</div> 

とCSS

.m{ 
clear:both; 
margin:0 auto; 
width:85%; 
text-align:center; 
} 

.m1{ 
float:left; 
width:25%; 
margin:0; 
} 

.n1{ 
width:25%; 
float:left; 
text-align:right;  
margin:0; 
-webkit-appearance: radio; 
} 

#n2{ 
float:left; 
width:15%; 
margin-left:5%; 
margin-right:5%; 
} 

Answer 1

うわー、この1への関心のないたくさんです！あなたは、ブートストラップを使用している場合はどのような方法の答え（または働く少なくとも一つ）も

.n1{ 

width:5%; 
margin-left:10%; 
margin-right:10% 
} 

は、あなたが追加する必要があります。

input[type=radio]{ 
margin-left:10% 
margin-right:10% 
} 

を、あなたは.n1

に余裕の属性を削除することができます