使用媒体查询，当屏幕宽度大于或等于 600 像素时，如何制作使用网格布局来布局标签和表单元素的表单？

Question

我的代码正确吗？ 我有点困惑，因为我不完全确定仅列出表单类是否意味着表单中的标签和元素也将调整为网格布局。

@media only screen and (min-width: 600px) {
.form {
display:grid}
}

Answer 1

您在此处的代码将为任何具有“表单”类的元素提供网格在 600 像素及以上宽的屏幕上的显示属性。 但是表单元素本身会发生什么取决于表单中包含的实际 html 标记。 在您的示例中，具有表单类的元素的所有 DIRECT 继承者都将成为网格项目，但这也不会自动延续到这些项目的继承者。

假设您有 6 个文本字段，每个字段都有一个标签。 您可能希望将每个标签和字段对包装在一个 div 中，并将它们作为 .form 的直接子级。 然后，您将在表单中有 6 个 div 来设置您的网格布局，并且每个网格项将包含该字段所需的所有实际表单标记。

在此示例中，您应该在 3 列中看到 6 个网格项。

*你不需要第二或第三个 CSS 声明，这些只是为了让这个例子更漂亮一点。

 @media only screen and (min-width: 600px) { .form { display: grid; grid-gap: 20px; grid-template-columns: 2fr 2fr 2fr; } .form > div { border: 1px solid #ccc; padding: 10px; } .form > div > * { display: block; } }

 <form class="form"> <div> <label>Field name</label> <input type="text" /> </div> <div> <label>Field name</label> <input type="text" /> </div> <div> <label>Field name</label> <input type="text" /> </div> <div> <label>Field name</label> <input type="text" /> </div> <div> <label>Field name</label> <input type="text" /> </div> <div> <label>Field name</label> <input type="text" /> </div> </form>