Wie Radio-Tasten auf einer Iphone-Safari ausrichten

Question

Ich versuche, Radioknöpfe unter ihrer Bezeichnung horizontal auszurichten. Der Code funktioniert gut auf Chrome auf meinem Desktop, aber nicht auf einem Iphone entweder auf Safari oder Chrom. Hier ist die 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> 

und die 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

Wow, nicht viel Interesse an diesem! Jede Art und Weise die Antwort (oder zumindest eine, die funktioniert)

.n1{ 

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

auch, wenn Sie Bootstrap verwenden Sie hinzufügen müssen:

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

und Sie können die Marge Attribute in .n1

entfernen