为什么检查按钮在移动设备上无法正确显示？

Question

我在桌面上看到了这个小登录页面：

desk

在移动设备上：

enter image description here

html：

<section class="flex-container">

  <div class="imagex">
    <img src="./src/rat2.svg" class='rat' alt="" srcset="">
  </div>

  <div class="form-container">
      <input class="form-control form-i" type="text" placeholder="ID">
      <input class="form-control form-i" type="password" placeholder="PASSWORD">
  
      <div class="form-f">
          <input class="form-i check" type="checkbox"">
          <p>REMEMBER ME</p>
      </div>

      <button class="btn btn-primary form-i btnF" type="submit">SIGN</button>
  </div>
</session> 

为什么不同？

Answer 1

这一点：

  <div class="form-f">
  <input class="form-i check" type="checkbox"">
  <p>REMEMBER ME</p>
</div>

你可以试试这样：

  <div class="form-control form-f">
  <label><input class="form-control form-i check" type="checkbox"> REMEMBER ME</label>
</div>

至少我相信您至少在检查 form-control 时缺少 input 作为类声明的一部分。