前言:看了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>
效果如图: