iphone - 如何对齐 Iphone safari 上的单选按钮

Question

我正在尝试将单选按钮水平对齐到其标签下方。该代码在我桌面上的 chrome 上运行良好，但在 safari 或 chrome 上的 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

将 radio 输入与其标签水平和垂直对齐。此代码在 iPhone 的 Safari 和 Chrome 上运行良好。

<input  class="radio-button" type="radio" name="sn"  value="yes">

    .radio-button{
        width:10px;
        height:10px;
        -webkit-appearance: radio;
    }