css - 如何在带有 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> s 是具有 display: grid; 的元素的直接后代它将那些放在网格中，而不是表单元素。我该如何解决这个问题？

Answer 1

我看到两个选项:

1. 如果你真的想使用 CSS 网格布局，你需要使用这个

   fieldset {  display: contents;}

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

2. 如果您希望带边框等的字段集正常显示，您需要更改布局。这是一个可以作为起点的示例:

   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;}