输入框对齐

前言：看了csdn上很多输入框对齐方式，大部分都是使用css进行对齐，这样会有个问题，就是适用性不大，只对特定输入框排列方式有效。这里讲两种方法。

1.使用表格标签

这里以登录界面举例，将登录块设成一个表格即可。为了直观效果，这里不选择加css文件，只加入一些简单的效果。

        <table>
            <tr>
                <td width="100px"><label for="name">姓名：</label></td>
                <td><input type="text" id="name" required/></td>
            </tr>
            <tr>
                <td><label for="pwd">密码：</label></td>
                <td><input type="password" id="pwd" required/></td>
            </tr>
            <tr>
                <td><label for="phone">手机号：</label></td>
                <td><input type="text" maxlength="11" id="phone" required/></td>
            </tr>
            <tr>
                <td><label for="email">邮箱：</label></td>
                <td><input type="email" id="email" required/></td>
            </tr>
            <tr>
                <td>性别 :</td>
                <td>
                    <label for="man">男 :</label>
                    <input type="radio" name="sex" id="man" required/>
                    <label for="woman">女 :</label>
                    <input type="radio" name="sex" id="woman" required/>
                </td>
            </tr>
        </table>

输出效果 

2.使用bootstrap网格结构

和表格标签相似，注册界面的每一行对应网格结构中的每一行，注意姓名等标签占一格就好。css可自己进行设置。

<div class="container">
  <div class="row">
    <div class="col-sm-1">
      <label>姓名：</label>
    </div>
    <div class="col-sm-1">
      <input type="text" name="username">
    </div>
  </div>

  <div class="row">
    <div class="col-sm-1">
      <label>密码：</label>
    </div>
    <div class="col-sm-1">
      <input type="password" name="password">
    </div>
  </div>

  <div class="row">
    <div class="col-sm-1">
      <label>手机号：</label>
    </div>
    <div class="col-sm-1">
      <input type="text" name="tel">
    </div>
  </div>

  <div class="row">
    <div class="col-sm-1" >
      <label>性别：</label>
    </div>
    <div class="col-sm-1">
      <input type="radio" value="man" name="sex">男
      <input type="radio" value="woman" name="sex">女
    </div>
  </div>
</div>

效果如图：