Warum funktioniert mein HTML/CSS-Grid nicht im Grid?
P粉146080556
P粉146080556 2024-02-17 15:49:36
0
1
416

Ich versuche, ein Eingabeformular in einem Raster innerhalb eines anderen Rasters zu erstellen, aber es funktioniert nicht. Ich habe oft nachgeschlagen, wie man ein CSS-Raster erstellt, aber ich weiß nicht, was ich falsch mache. Die gesamte Seite bleibt im ersten Rasterfeld hängen. Ich frage mich, ob ich den richtigen Ort verwende, um das Raster richtig zu implementieren, oder ob es daran liegen könnte, wie ich die Rasterklasse/-id eingefügt habe

Ich bin neu in HTML/CSS. Wenn Sie also weitere Fragen haben, lassen Sie es mich bitte wissen. (Außer dass die Einrückung beim Kopieren und Einfügen durcheinander geraten ist, was ich zu beheben versucht habe)

<!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粉146080556
P粉146080556

Antworte allen(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
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage