直入主题吧,直接写input
标签去做对齐,是很难对齐,所以之前一直都是用table
表格去对齐,这个大家应该都知道(我还是放一个简单的demo吧)。现在发现一个更好的对齐方式。是通过label
标签去对齐。
第一种 直接用input
写
这种不太好对齐 可能用 
去对齐,但是太麻烦。

第二种 用table
去布局
这种比较好对齐,可以采用
<table >
<tr><td>登录名</td><td><input type="text"></td></tr>
<tr><td>密码</td><td><input type="text"></td></tr>
</table>
效果是这样的

第三种 用label
标签来对齐
<label for="inputs">登录名</label><input type="text" id="inputs"></input>
<br />
<label for="input2">密码</label><input type="text" id="input2"></input>
这样只需要在css中设定
label{
display: inline-block;
min-width: 100px;/*或者 width: 100px;*/
}
这样就ok了

网友评论