我试图在另一个网格中的一个网格中创建一个输入表单，但它不起作用。我已经多次查找如何制作 css 网格，但我不知道我做错了什么。整个页面卡在第一个网格框中。我想知道我是否正确使用了正确的位置来实现网格，或者是否可能是我如何将网格类/id 放入
我是 html/ CSS 新手，所以如果有其他问题请告诉我。 （除了当我复制粘贴时缩进被搞乱之外，我试图修复它）
<!Doctype html>
<lang="en">
<head>
<meta charset="utf-8">
<title>Form</title>
<style>
#grid {
display: grid;
grid-template-columns: 160px auto auto auto;
grid-template-rows: 150px auto 100px;
grid-template-areas:
"h h h h"
"n g g g"
"f f f f";
}
#ingrid {
grid-area: g;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto;
grid-template-areas:
"l m r";
}
#header {
grid-area: h;
background-color: #DBA3EE;
color: #FFF;
line-height: 250%;
font-family: Arial, Verdana, sans-serif;
font-weight: bold;
font-size: 72px;
text-indent:20px;
}
#nav {
grid-area: n;
background-color: #15394F;
color: #FFF;
font-family: Arial, Verdana, sans-serif;
font-weight: bold;
font-size: 25px;
text-indent:2px;
padding: 8px;
}
.form {
grid-area: g;
padding:5px;
margin-top: 20px;
margin-bottom: 20px;
border: 2px solid #000;
}
.inform {
grid-area: l;
grid-area: m;
grid-area: r;
}
.midform {
grid-area: m;
}
.rightform {
grid-area: r;
}
.leftform {
grid-area: l;
}
</style>
</head>
<body id="grid">
<div id="header">HEADER</div>
<div id="nav">Home<br>Main<br>Form<br></div>
<form class="form">
<div class="inform">
<div class="midform">How would you like to be contact? <br>
<input type="radio" name="contact" value="email" checked="checked"> email <br>
<input type="radio" name="contact" value="phone" > phone <br></div>
<div class="midform">Which course(s) are you registering? <br>
<input type="checkbox" name="course" value="ACS-1805" >ACS-1805<br>
<input type="checkbox" name="course" value="ACS-1809" >ACS-1809<br>
<input type="checkbox" name="course" value="ACS-1903" >ACS-1903<br></div>
<div class="midform">Payment Method: <input list="paymenttype" name="paymenttype"><br>
<datalist id="paymenttype">
<option value="Debit">
<option value="MasterCard">
<option value="VISA">
</datalist></div>
</div>
<div class="inform">
<div class="midform">Special Request<br>
<textarea name="comments" id="sptextarea"></textarea><br></div>
<div class="leftform">
<div>Rate Your Previous</div>
<div>Experience (with 10 is</div>
<div>the best): </div>
</div>
<div class="midform">
<div>0<input type="range" min="1" max="10" step="1" value="5">10<br>
</div>
</div>
<div class="midform"><button type="submit">Submit</button>
<button type="reset">Reset</button></div>
</div>
</form>
</body>
</html>
P粉3176793422024-02-18 09:31:56
从正文中删除 #grid 并将其包裹在其他元素周围。我还从您的表单中删除了 margin-top 和 margin-bottom 以使其删除不需要的间距。像这样：
#grid {
display: grid;
grid-template-columns: 160px auto auto auto;
grid-template-rows: 150px auto 100px;
grid-template-areas: "h h h h" "n g g g" "f f f f";
}
#ingrid {
grid-area: g;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto;
grid-template-areas: "l m r";
}
#header {
grid-area: h;
background-color: #DBA3EE;
color: #FFF;
line-height: 250%;
font-family: Arial, Verdana, sans-serif;
font-weight: bold;
font-size: 72px;
text-indent: 20px;
}
#nav {
grid-area: n;
background-color: #15394F;
color: #FFF;
font-family: Arial, Verdana, sans-serif;
font-weight: bold;
font-size: 25px;
text-indent: 2px;
padding: 8px;
}
.form {
grid-area: g;
padding: 5px;
border: 2px solid #000;
}
.inform {
grid-area: l;
grid-area: m;
grid-area: r;
}
.midform {
grid-area: m;
}
.rightform {
grid-area: r;
}
.leftform {
grid-area: l;
}
HEADER