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> - ＆gt; <input> - ＆gt; <span>模式。）

问题是 - 如果我在<fieldset>中包含该模式的一些实例，我想为个人详细信息，银行详细信息等进行处理，因为<fieldset>是直接的后代带有display: grid;的元素将它们放在网格中，而不是表单元素。我怎么能绕过这个？

Answer 1

我看到两个选择：

如果您要严格使用CSS网格布局，则需要使用此
```
fieldset {
  display: contents;
}
```
但是，这将从视图中消除场集，因此无法获得边框等。您仍然可以设置图例的样式。

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

fieldset > label, form > label {
  clear: both;
  float: left;
  width: 18%;
  text-align: right;
  font-weight: bold;
  white-space: nowrap;
}
fieldset>label {
  margin-right: 0.5em;
  padding-top: 0.1em;
}
form>label {
  margin-left: 0.75em;
  margin-right: 0.5em;
  padding-top: 0.1em;
}
fieldset>:not(label):not(legend) {
  min-width: 72%;
  width: 72%;
  margin-bottom: 0.5em;
  display: block;
}
form>:not(label):not(fieldset) {
  min-width: 70%;
  width: 70%;
  margin-bottom: 0.5em;
  display: block;
}

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

1 个答案: