为什么我的 html/CSS 网格中的网格不起作用？

Question

I am trying to make a input form in a grid that's in another grid, but it is not working.我正在尝试在另一个网格中的网格中制作输入表单，但它不起作用。 I've looked up how to make css grids so many times, but I can't figure out what I' doing wrong.我已经多次查看如何制作 css 网格，但我无法弄清楚我做错了什么。 The entire page gets stuck in the first grid box.整个页面卡在第一个网格框中。 I want to know if I am properly using the right location for implementing the grid or if its maybe a problem with how I put the grid class/id in我想知道我是否正确地使用了正确的位置来实现网格，或者我将网格类/id 放入的方式是否有问题

I am new to html/ CSS so please let me know if there are other problems.我是 html/ CSS 的新手所以如果还有其他问题请告诉我。 (Other than the indentation it got messed up when I copy pasted I tried to fix it) （除了缩进它在我复制粘贴时弄乱了我试图修复它）

<!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>

Answer 1

Remove the #grid from the body and wrap it around your other elements instead.从正文中删除#grid并将其包裹在其他元素周围。 I've also removed margin-top and margin-bottom from your form to make it remove unneeded spacing.我还从您的表单中删除了margin-top和margin-bottom以使其删除不需要的间距。 Like this:像这样：

 #grid { display: grid; grid-template-columns: 160px auto auto auto; grid-template-rows: 150px auto 100px; grid-template-areas: "hhhh" "nggg" "ffff"; } #ingrid { grid-area: g; display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto; grid-template-areas: "lmr"; } #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; }

 <div 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> </div>

为什么我的 html/CSS 网格中的网格不起作用？

问题描述

1 个解决方案

解决方案1
1 2022-12-08 07:14:57

为什么我的 html/CSS 网格中的网格不起作用？

问题描述

1 个解决方案

解决方案1 1 2022-12-08 07:14:57

解决方案1
1 2022-12-08 07:14:57