Question

我开始使用CSS Grid，我正在尝试制作类似于Facebook上的注册页面。

它应该在一行上有名字和姓氏，在另一行上有电子邮件地址，在第三行有一个提交按钮。电子邮件应该跨越列。

这是我的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

我在哪里犯了错误？ :)需要改变什么？

Answer 1

这是你想要实现的目标。

<强> 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;
}

为什么我的CSS Grid错了？

1 个答案: