为什么我的 html/CSS 网格在网格中不起作用?
P粉146080556
P粉146080556 2024-02-17 15:49:36
[CSS3讨论组]

我试图在另一个网格中的一个网格中创建一个输入表单,但它不起作用。我已经多次查找如何制作 css 网格,但我不知道我做错了什么。整个页面卡在第一个网格框中。我想知道我是否正确使用了正确的位置来实现网格,或者是否可能是我如何将网格类/id 放入

我是 html/ CSS 新手,所以如果有其他问题请告诉我。 (除了当我复制粘贴时缩进被搞乱之外,我试图修复它)


 
  
   
   Form
   
  
  
   
   
   
    
How would you like to be contact?
email
phone
Which course(s) are you registering?
ACS-1805
ACS-1809
ACS-1903
Payment Method:
Special Request

Rate Your Previous
Experience (with 10 is
the best):
010

P粉146080556
P粉146080556

全部回复(1)
P粉317679342

从正文中删除 #grid 并将其包裹在其他元素周围。我还从您的表单中删除了 margin-topmargin-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;
}
How would you like to be contact?
email
phone
Which course(s) are you registering?
ACS-1805
ACS-1809
ACS-1903
Payment Method:
Special Request

Rate Your Previous
Experience (with 10 is
the best):
010
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号