title: How to align radio buttons on a Iphone safari
body: <p>I'm trying to horizontally align radio buttons below their label.  The code works fine on chrome on my desktop but not on a Iphone either on safari or chrome.  Here's the <a href="https://jsfiddle.net/rss81/8wq4ba07/3/" rel="nofollow">JS Fiddle</a></p>
  
  <pre><code>&lt;div&gt;
  
  &lt;div class='m' &gt;
      &lt;h3 class='m1'&gt;RES&lt;/h3&gt;
      &lt;h3 class='m1'&gt;SAIL&lt;/h3&gt;
      &lt;h3 class='m1'&gt;Crew&lt;/h3&gt;
      &lt;h3 class='m1'&gt;XCL&lt;/h3&gt;
  &lt;/div&gt;
  
      &lt;div class='m'&gt;
          &lt;input  class='n1' type="radio" name="rsx" id="r" value="res"&gt;
          &lt;input  class='n1' type="radio" name="rsx" id="r" value="sail"&gt;
          &lt;select id='n2'   name="crewopen"&gt;
          &lt;option value=""&gt;&amp;nbsp;&lt;/option&gt;
          &lt;option value="1"&gt;1&lt;/option&gt;
          &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;option value="3"&gt;3 &lt;/option&gt;
          &lt;option value="4"&gt;4 &lt;/option&gt;
          &lt;option value="5"&gt;5 &lt;/option&gt;
          &lt;option value="6"&gt;6 &lt;/option&gt;
  
          &lt;/select&gt;
          &lt;input class='n1' type="radio" name="rsx" id="r" value="xcl"&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS</p>
  
  <pre><code>.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%;
  }
  </code></pre>