我想创建一个可以使用<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>
不得不将形式input
包装在<div>
或其他容器中的细节中,以使display: grid
工作并设计它们。