|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
用了Grid布局来搞文字块的对齐,比table看着舒服,未来可能性也高
但是有个问题,就是为什么#login_main{ form{ display:grid;}}这么设置时grid布局就会失效?
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <style>
- #login_main{
- position: absolute;
- left: 50%; top: 35%;
- transform: translate(-50%,-50%);
- background-color: white;
- }
- #login_main form{
- display: grid;
- grid-template-columns: auto auto;
- grid-template-rows: auto auto;
- justify-items: end;
- }
- </style>
- <title>泥巴冒险-登录</title>
- </head>
- <body>
- <fieldset id="login_main"><legend>注册/登录</legend>
- <form id="login">
- <label for="userName">用户名: </label><input type="text" name="userName">
- <label for="passWord">密码: </label><input type="password" name="passWord">
- </form>
- <button type="submit" form="#login">登录</button>
- <button type="reset" form="#login">重置密码</button><br />
- 注册即代表同意<a name="userAgreement" href="javascript:read_userAgreement()">用户协议</a>
- </fieldset>
- </body>
- </html>
复制代码 |
|