我在使用 CSS 网格正确格式化表单时遇到问题

Question

我正在尝试使用 CSS 网格布局一个 2 列的 HTML 表单。

在第一列我放置标签，每行一个。 在第二列我放置表单元素，每行一个。

这是我的第一个问题，我对 CSS 和 HTML 都很陌生。 有人可以指出我误解的方向吗？ 这将不胜感激。 谢谢。

这是 CSS，然后是 HTML，我有表单。

 @media screen and (min-width: 600px) { form {justify-self: start; max-width: 600px; display: grid; grid-template-columns: 20% 1fr%; grid-template-rows: repeat(6, 20%); grid-gap: 20px; font-family: Arial, Helvetica, sans-serif; } label[for="menu"] { grid-area: 1 / 1 / 1 / 2; } label[for="bio"] { grid-area: 2 / 1 / 2 / 2; } label[for="name"]{ grid-area: 3 / 1 / 3 / 2; } label [for="email"]{ grid-area: 4 / 1 / 4 / 2; } .grid5 { grid-area: 5 / 1 / 5 / 2; } .grid6 { grid-area: 6 / 1 / 6 / 2; } select { grid-area: 1 / 2 / 1 / 3; } textarea { grid-area: 2 / 2 / 2 / 3; } #name { grid-area: 3 / 2 / 3 / 3; } #email { grid-area: 4 / 2 / 4 / 3; } }

 <div class="form"> <form action="" method="post"> <div id="grid1"> <label for="menu">Type</label> <select name="pet_name" id="menu"> <option>Cat</option> <option>Dog</option> <option>Hamster</option> <option>Zebra</option> <option>Other</option> </select> </div> <div id="grid2"> <label for="bio">Biography</label> <textarea name="pet_bio" id="bio"></textarea> </div> <div id="grid3"> <label for="name">Name</label> <input type="text" id="name" name="pet_name"> </div> <div id="grid4"> <label for="email">Owners Email</label> <input id="email" name="pet_owner_email"></div> <div id="grid5"> <button type="submit" id="new-pet-submit-button">Create New Pet</button> </div> <div id="grid6"> <button type="reset" id="reset">Reset</button></div> </form> </div>

Answer 1

CSS Grid 仅影响第一级中的所有对象。

消除表单元素周围的 div 使您的 CSS 代码能够工作。

像这样：

 @media screen and (min-width: 600px) { form {justify-self: start; max-width: 600px; display: grid; grid-template-columns: 20% 1fr%; grid-template-rows: repeat(6, 20%); grid-gap: 20px; font-family: Arial, Helvetica, sans-serif; } label[for="menu"] { grid-area: 1 / 1 / 1 / 2; } label[for="bio"] { grid-area: 2 / 1 / 2 / 2; } label[for="name"]{ grid-area: 3 / 1 / 3 / 2; } label [for="email"]{ grid-area: 4 / 1 / 4 / 2; } .grid5 { grid-area: 5 / 1 / 5 / 2; } .grid6 { grid-area: 6 / 1 / 6 / 2; } select { grid-area: 1 / 2 / 1 / 3; } textarea { grid-area: 2 / 2 / 2 / 3; } #name { grid-area: 3 / 2 / 3 / 3; } #email { grid-area: 4 / 2 / 4 / 3; } }

 <div class="form"> <form action="/pets" method="post"> <label for="menu">Type</label> <select name="pet_name" id="menu"> <option>Cat</option> <option>Dog</option> <option>Hamster</option> <option>Zebra</option> <option>Other</option> </select> <label for="bio">Biography</label> <textarea name="pet_bio" id="bio"></textarea> <label for="name">Name</label> <input type="text" id="name" name="pet_name"> <label for="email">Owners Email</label> <input id="email" name="pet_owner_email"> <button type="submit" id="new-pet-submit-button">Create New Pet</button> <button type="reset" id="reset">Reset</button> </form> </div>