css-form表单对齐

　　有关用户注册界面或者登陆界面总会涉及form表单文本与输入框各自对齐的问题，前段时间学习的时候总结了下面两个常用方法

　　1.使用<table>表格元素

　　2.使用<fieldset><label>元素分区分块

　　以下是简单的代码验证，一些属性参数可自行调节。初学css,希望后来者可以补充说明。

　　（补充：实际问题中，当表单填写有单选框，复选框，文本域等元素的时候第2中方法并不能实现）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         table{
 8             width: 100%;
 9             text-align: center;
10 
11         }
12         .th{
13             height: 40px;
14             width: 50%;
15             text-align: right;
16         }
17         td{
18             height: 40px;
19             width: 50%;
20             text-align: left;
21         }
22     </style>
23 </head>
24 <body>
25     <form action="post" method="#">
26         <table summary="this is a form">
27         <tr>
28             <td class="th">用户名：</td>
29             <td><input type="text" name="user"></td>
30         </tr>
31         <tr>
32             <td class="th">密码：</td>
33             <td><input type="password" name="pwd"></td>
34         </tr>
35         <tr>
36             <td class="th"><input type="submit" name="submit" value="登录"></td>
37             <td><input type="reset" name="reset" value="重置"></td>
38         </tr>
39     </table>    
40     </form>
41     
42 </body>
43 </html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        form fieldset{
            border:0;
            text-align: center;
        }
        label{
            display: inline-block;
            width: 100px;
            text-align: right;
        }
        input{
            width: 100px;
        }
        #button input{
            width: 60px;
            position: relative;
            left: 30%;
        }
    </style>
</head>
<body>
    <form action="post" method="#">
        <fieldset>
            <p>
                <label>用户名：</label>
                <input type="text" name="user">
            </p>
            <p>
                <label>密码：</label>
                <input type="password" name="pwd">
            </p>
            <p id="button">
                <input type="submit" name="submit" value="登录">
                <input type="reset" name="reset" value="重置">
            </p>
        </fieldset>
    </form>
</body>
</html>

 

posted on 2018-09-20 09:35  有水  阅读(9063)  评论(0)  编辑  收藏  举报

导航