為什麼我的 html/CSS 網格在網格中不起作用?
P粉146080556
P粉146080556 2024-02-17 15:49:36
0
1
417

我試圖在另一個網格中的一個網格中建立一個輸入表單,但它不起作用。我已經多次查找如何製作 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粉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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板