在网格单元格内显示 div 时出错答案

【问题标题】：Error with displaying div inside grid cell在网格单元格内显示 div 时出错
【发布时间】：2021-11-30 11:59:47
【问题描述】：

试图弄清楚为什么带有class="input-group form-fieldset_select" 的 div 不在网格单元内，而是低于它。

.form-fieldset {
  width: 290px;
  height: auto;
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 20px 56px;
  row-gap: 8px;
}
.form-fieldset > legend {
  padding: 0;
  margin: 0;
}

.input-group {
  grid-row: 2/3;
  display: flex;
}

.form-fieldset_select {
  justify-content: center;
}

.select-button-label {
  color: black;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  width: 128px;
  height: 56px;
  border: 1px solid gold;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.select-button-label > input {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
}

<fieldset class="form-fieldset">
  <legend>Legend</legend>
   <div class="input-group form-fieldset_select">
    <label class="select-button-label">
      Button1
      <input type="text" />
    </label>
     <label class="select-button-label">
       Button2
      <input type="text" />
    </label>
  </div>
</fieldset>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

根据字段集和图例的W3 指南，<legend> 应该是字段集的第一个子项。

在您的情况下，您将<legend> 作为第一个孩子，然后您的<div class="input-group form-fieldset_select"> 是正确的。

如果您希望该 div 位于网格单元格中，则必须通过将 <fieldset> 标记替换为 <div> 来更改结构。

【讨论】：