html - 当视口(viewport)宽度低于 225px 时网格单元突出

Question

当视口(viewport)宽度更改为 225 像素左右时，为什么表单元素(现在是网格元素)不包含其单元格(网格单元格突出)？

这是我遇到问题的代码的链接:https://codepen.io/skanda1395/pen/RXNZZO

我需要对以下代码进行哪些更改？

form {
      display: grid;
      width: 50vw;
      margin: auto;
      grid-template-columns:  1.1fr 1.5fr;
      grid-gap: 17px;
      background-color: white;
      border-radius: 5px;
      padding: 33px;
     }

Answer 1

要正确显示，您可以将标签放入 div 中，以便网格轻松工作

      <div>
          <label for="name" id="name-label">Name:</label>
          <input class="wide" id="name" type="text" placeholder="Enter your name" required>
      </div>

      <div>
          <label for="email" id="email-label">Email:</label>
          <input class="wide" id="email" type="email" placeholder="Enter your email" required>
      </div>

      <div>
          <label for="number" id="number-label">Age:</label>
          <input class="wide" id="number" type="number" min="0" max="10" placeholder="Enter your age">
      </div>

      <div>
          <label for="dropdown">What do you do?</label>
          <select class="wide" id="dropdown">
          <option>Student</option>
          <option>Full-time Employee</option>
          <option>Self-employed</option>
          <option>Other</option>
          </select>
     </div>

您也可以将输入嵌套在标签内，但要工作，您必须像这样将显示设置为“ block ”label{display:block;}

    <label for="name" id="name-label">Name:
            <input class="wide" id="name" type="text" placeholder="Enter your name" required>
    </label>