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

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>

至少我相信您在至少检查input 的类声明中缺少form-control。