表单对齐

这是百度的表单注册，左边是文字，右边是表单元素。表单元素排列整齐，非常美观，表单对齐，是我们在做表单的时候经常遇到的事情。

那我们看看像BAT这些大公司是怎么处理这件事的呢

方法如下：

（1）每行表单分为左栏和右栏，左栏主要是文字，右栏是表单，所有行的左栏长度相等，所有行的右栏的盒子长度之和相等。

左栏一般是一个label，右栏是若干个文本框

（2）所有左栏和右栏的盒子设置为左浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单对齐</title>
    <style type="text/css">
        form{
            width: 425px;
            font:14px bold "Microsoft Yahei";
        }
        p:not(.register){
            width: 425px;
            height: 42px;
        }
        /*p清浮动*/
        p{
            overflow: hidden;
        }
        label:not(.nlabel){
            float: left;
            width: 65px;
            height: 42px;
            text-align: right;
            margin-right: 10px;
            line-height: 42px;
            color: rgb(102, 102, 102);
            font-weight: 700;
        }
        input:not(.special){
            float: left;
            width: 328px;
            height: 16px;
            padding: 11px 10px;
            border: 1px solid silver;
        }
        #verifyCode,#verifyBtn{

            float: left;
            padding: 11px 10px;
            border: 1px solid silver;
        }
        #verifyCode{
            width: 156px;
        }
        #verifyBtn{
            width: 158px;
            margin-left: 10px;
            background-color: rgb(247, 247, 247);
            color: rgb(102, 102, 102);
        }
        #check{
            vertical-align: -3px;
            margin-left: 75px;
        }
        .checkbox{
            font-size: 12px;
            color: rgb(51, 51, 51);
        }
        a{
            text-decoration: none;
        }
        .register{
            width: 425px;
            height: 50px;
        }
        #register{
            width: 350px;
            height: 50px;
            margin-left: 75px;
            background-color: rgb(63, 137, 236);
            color: rgb(255, 255, 255);
            border: none;
        }
     

    </style>
</head>
<body>
    <form method="post" action="#">
        <p>
            <label for="name">用户名</label>
            <input type="text" id="name" placeholder="请设置用户" />
        </p>
        <p>
            <label for="tel">手机号</label>
            <input type="text" id="tel" placeholder="可用于登录和找回密码" />
        </p>
        <p>
            <label for="psw">密码</label>
            <input type="passsword" id="psw" placeholder="请设置密码" />
        </p>
        <p>
            <label for="name">验证码</label>
            <input type="text" id="verifyCode" placeholder="请输入验证码" class="special" />
            <input type="button" id="verifyBtn" value="获取短信验证码" class="special"/>
        </p>
            <p class="checkbox">
            <input type="checkbox" id="check" class="special">
            <label for="check" class="nlabel">阅读并接受</label>
            <a href="#">《百度用户协议》</a>
            及<a href="#">《百度隐私权并保护声明》</a>

        </p>
        <p class="register">
            <input type="submit" id="register" value="注册" class="special"/>
        </p>
    </form>
</body>
</html>

结果

表单对齐

推荐阅读