html - 我在使用 CSS 网格正确格式化表单时遇到问题
问题描述
我正在尝试使用 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>
解决方案
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>
推荐阅读
- html - 我的网络应用程序中的图像未显示但已正确添加
- r - r 操作序列的字符向量
- python - 如何让熊猫的 timedeltas 时区感知?
- vue.js - Vuetify 集中规则
- mysql - 在 where 子句中正确引用存储过程参数的值
- python - 我怎样才能让这个程序填写表格?
- c# - 如何获取原始 HttpWebRequest (c#)
- visual-studio - 如何使用 TFS 版本控制在 VS.Net 中引用多个项目的解决方案分支
- python - 如何在几个 Numpy 数组的特定索引处查找和提取值?
- pandas - 如何在熊猫数据框中用今天的日期填充空数据?