如何在带有CSS网格的表单中使用字段集？

Question

我想将<fieldset>用于语义HTML。我正在使用CSS网格使表单看起来不错。

form {
  display: grid;
  grid-template-columns: minmax(100px, max-content) minmax(200px, max-content) minmax(200px, 1fr);
  grid-gap: 10px;
}

.field__label {
  text-align: right;
}

<form action="#" method="POST">

  <label class="field__label" for="first-names">
             First names
  </label>

  <input class="form__entry" id="first-names" type="text" name="firstName">

  <span class="form__feedback form__instructions">
            Must only use letters, spaces, hyphens and apostrophes
    </span>

</form>

这一切都很好用（在我的真实形式中，我重复了几次<label>-> <input>-> <span>模式）。

[问题是-如果我将该模式的一些实例包装在<fieldset>中，我想将其用于个人详细信息，银行详细信息等，因为<fieldset>是元素与display: grid;的直接后代]会将其放置在网格中，而不是表单元素中。我如何解决这个问题？

Answer 1

我看到两个选项：

1. 如果您严格要使用CSS网格布局，则需要使用此

   fieldset {显示内容}

   但是，这将从视图中消除现场图集，因此无法获得边框等。您仍然可以设置图例的样式。

2. 如果要使字段集正常显示带有边框等，则需要更改布局。这是一个可能作为起点的示例：

   字段集>标签，表格>标签{清楚的向左飘浮;宽度：18％;文字对齐：右；font-weight：粗体;空白：nowrap;}fieldset>标签{右边距：0.5em;padding-top：0.1em;}形式>标签{左边距：0.75em;右边距：0.5em;padding-top：0.1em;}fieldset>：not（label）：not（legend）{最小宽度：72％；宽度：72％;底边距：0.5em;显示：块；}格式>：not（标签）：not（字段集）{最小宽度：70％；宽度：70％;底边距：0.5em;显示：块；}