Question

我正在尝试为我的表单设置Flex / CSS Grid解决方案，但是我正在使用的控件类型中的至少一种（已将其范围缩小至选择范围）导致了CSS Grid中的所有控件溢出弹性显示区域的边界。

其他一些信息：

平台：Wordpress

主题：木星

标签插件：WP标签响应式水平垂直和手风琴标签

这是代码及其呈现方式：

.GridDiv {
  display:grid;
  grid-template-columns: max-content max-content;
  grid-gap:5px;
  text-align: right;
}

<label id="errMsg" style="color: red; font-size:14px; font-weight:bold;"></label><br />
<label for="NewUsrFrm">New User Form:</label>
<form id="NewUsrFrm" method="post" action="/grant/php/addUser.php">
  <fieldset>
    <div style="display: flex;">
      <div style="width: 280px;">
        <div style="float: left;">
          <legend>User Information</legend>
          <div class="GridDiv">
            <label for="UsrFName">First Name:</label> <input type="text" name="UsrFName" width="120" />

            <label for="UsrLName">Last Name:</label> <input type="text" name="UsrLName" width="120" />

            <label for="UsrAge">Age:</label> <input type="number" min="1" name="UsrAge" value="1" width="120" />
          </div>
        </div>
      </div>
    </div>
  </fieldset>

  <fieldset>
    <div style="display: flex;">
      <div style="width: 280px;">
        <div style="float: left;">
          <legend>Login Information</legend>

          <div class="GridDiv">
            <label for="UsrName">Username:</label> <input type="text" name="UsrName" width="120" />

            <label for="UsrPass">Password:</label> <input type="password" name="UsrPass" width="120" />

            <label for="UsrGrp">Group:</label> <input type="number" name="UsrGrp" width="120" />

            <label for="UsrType">Type:</label>
            <select name="UsrType" width="100">
              <option value="0">Student</option>
              <option value="1">Parent</option>
              <option value="2">Administrator</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <br />

  <button type="submit" id="frmBtnSub">Create User</button>
</form>

注意：您可能需要一个WordPress网站，并且需要安装上述插件来测试我发布的代码。

更新：

我已经使用检查器设法破解了它，以查看最初的字段集输入是在其宽度上呈现的。

当我将其应用于第二个字段集中的控件时，它们对于其他控件正确显示；选择仍然是繁琐的。因此，我想现在的问题是，为什么要正确渲染一个字段集的控件，但是如果在第二个字段集中有一个选择，则不会。

即使我使用！important，该选择也不使用我尝试分配给它的width css属性。如果您有两个！css重要属性，但其中一个具有更高的特异性，会发生什么情况？

选择导致CSS网格问题

0 个答案: