为什么我的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错误？

回答

相关问题