复选框无法在iPhone上正常显示（6）

Question

我的网页在多个浏览器的桌面上显示正常，但在Iphone（6）上无法正确显示。在Iphone（6）上，每个复选框在宽度内保持对齐。在桌面上，它们在宽度的中心对齐。这是js fiddle example

的链接

HTML

        <form id="reg_form" action="" method="post">
              <legend>Personal Data </legend> 
                 <h2>Select days you would like to get invitations for</h2>
                    <div id = "error_place"></div>
                    <div>
                       <ul>
                          <li>
                             <label for= "M">M</label>
                             <input type="checkbox" name="M"  value="1" id="M" class="days_group form_group">  
                          </li>
                          <li>
                             <label for= "Tu">Tu</label>
                             <input type="checkbox" name="Tu" value="1" id="Tu" class="days_group form_group"> 
                          </li>
                          <li>
                             <label for= "W">W</label>
                             <input type="checkbox" name="W"  value="1" id="W" class="days_group form_group">  
                          </li>
                       </ul>
                       <ul>
                          <li>
                             <label for= "Th">Th</label>
                             <input type="checkbox" name="Th" value="1" id="Th" class="days_group form_group"> 
                          </li>
                          <li>
                             <label for= "F">F</label>
                             <input type="checkbox" name="F"  value="1" id="F" class="days_group form_group">  
                          </li>
                          <li>
                             <label for= "Sa">Sa</label>
                             <input type="checkbox" name="Sa" value="1" id="Sa" class="days_group form_group"> 
                          </li>
                       </ul>
                       <ul>
                          <li>
                             <label for= "Su">Su</label>
                             <input type="checkbox" name="Su" value="1" id="Su" class="days_group form_group"> 
                          </li> 
                       </ul>

                       <button id="btnsubmit"  type="button">Submit</button>
                       <div id="spacer"></div>
                       <div class="next-back">
                          <button type="button" class="next light">next</button>                              
                          <button type="button" class="back">back</button>
                       </div>
                    </div>
              </fieldset>   
        </form>

CSS

input {
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-top: 5%;
    height: 5vw;
    width: 65%;
}



.next, .back {
    width: 25%; 
    font-weight:bold;
}

.next{  
    float:left;
    display:block;
}
#btnsubmit{
    clear: both;
    margin:0 auto;
    margin-top: 15%;
    display:block;
    width:25%;
    text-align: center;
}
.back {
    float:right;
}

.next-back{
    margin:0 auto;
    width: 65%;
}

.light{
    color: white;
    background-color:lightgray;
}

#spacer{
    height: 5vw;    
    clear:both;
}

ul{
    list-style-type: none;  
    width: 100%;
    text-align:center;
    padding:0;  
}

li{
    display:inline-block;
    width:30%;  
}

h2{
    text-align:center;
    margin-bottom:10%;
}

Answer 1

从width中移除input属性会使两个上下文中的复选框都居中。

input {
  ...
  w̶i̶d̶t̶h̶:̶ ̶6̶5̶%̶;̶
}

<强>铬/ Mac的

iOS Safari