您可以将详细信息元素设置为显示网格吗？

Question

我想创建一个可以使用 <details> 元素折叠的过滤器元素，因为它开箱即用，具有 open/close 功能。

然而，当涉及到内部字段的样式时，我想使用网格，但似乎 <details> 不能设置为 display: grid？

有没有人遇到过这种行为？

非常感谢您的意见！

details {
  display: grid;
  grid-template-columns: 100px 100px;
}

input {
  width: 100%;
}

label {
  display: block;
}

label:first-of-type {
  color: red;
  grid-column: 1;
}

label:last-of-type {
  color: blue;
  grid-column: 2;
}

<form>
  <details open>
    <summary>Filter</summary>
    <label>
        I should be on the left
        <input type="text">
      </label>
    <label>
        I should be on the right
        <input type="text">
      </label>
  </details>
</form>

Codepen here!

Answer 1

必须将表单 input 包含在 <div> 或其他容器中的详细信息中，才能让 display: grid 工作并设置样式。

您可以将详细信息元素设置为显示网格吗？

Can you set the details element to display grid?

css

css-grid

details-tag