爲什麼我的CSS Grid錯誤？

我開始使用CSS Grid，我正在嘗試製作一個類似於Facebook上的註冊頁面。爲什麼我的CSS Grid錯誤？

它應該在一行上有名字和姓氏，在另一行上是電子郵件地址，在第三行上是提交按鈕。電子郵件應該跨越列。

這是我的HTML和CSS：

<!DOCTYPE HTML> 
<title> JavaScript Form Validation. Maybe CSS Grid. </title> 

<style> 
    html,body{ 
     height : 100%; 
    } 
    body{ 
     display : flex; 
     display : -webkit-flex; 
     display : -moz-flex; 
     justify-content : center; 
     align-items : center; 
    } 

    form{ 
     display : grid; 
     grid-columns : 200px 1% 200px 
     grid-rows : auto 1% auto 1% auto; 
     border : 1px solid black; 
    } 
    #fname{ 
     grid-column : 1; 
     grid-row : 1; 
    } 

    #lname{ 
     grid-column : 3; 
     grid-row : 1; 
    } 

    #email{ 
     grid-row : 2; 
     grid-column-span : 3; 
    } 

    #submit{ 
     grid-row : 3; 
     grid-column-span : 3; 
    } 

</style> 
<body> 
     <form> 
      <input type="text" name="fname" id="fname" required="true" placeholder="First Name"/> 
      <input type="text" name="lname" id="lname" required="true" placeholder="Last Name"/> 
      <input type="email" name="email" id="email" required="true" placeholder="Email"/> 
      <button id="submit">Submit</button> 
     </form> 
</body>

，輸出是：

enter image description here

我在哪裏犯了一個錯誤？ :)什麼需要改變？

來源

2014-04-14 Little Child

Flex有瀏覽器的支持較差。 – bjb568

@ bjb568'網格呢？：/ –

你有一個瀏覽器，支持顯示網格（這只是IE10 +？：見http://css-tricks.com/almanac/properties/g/grid – HerrSerker

這是你試圖實現的。

FIDDLE

該演示使用floats和box-sizing:border-box;（supported by IE 8 and over）

CSS：

html, body { 
    height : 100%; 
} 
body { 
} 
form { 
    border : 1px solid black; 
} 
input{ 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    margin:0.3%; 
    padding:0.3%; 
    float:left; 
} 
#fname, #lname { 
    width:49.4%; 
} 
#email { 
    width:99.4%; 
} 
#submit { 
    display:block; 
    clear:both; 
}

來源

2014-04-14 08:18:08

爲什麼我的CSS Grid錯誤？

回答

相關問題