本文介绍了一种使用表格解决表单对齐问题的方法，避免了使用 占位符，确保了不同宽度的提示文字下输入框的整齐排列，适用于前端开发。
我们经常在使用表单的时候容易由于前面的提示文字的宽度不一样而导致后面的表达无法对齐，像下面这种情况：
<div>姓名：<input type="text" value="" /></div> <div>性别：<input type="text" value="" /></div> <div>手机/固话：<input type="text" value="" /></div>
姓名：
性别：
手机/固话：
大家也可能有像我一样，当初使用 占位符来使得表单对齐，作为一名前端不提倡使用 这种方法。
使用表格可以轻易搞定表单错位的问题，而且浏览器兼容性依也好。
<table> <tbody> <tr> <td>性别:</td> <td><input type="text" /></td> </tr> <tr> <td>性别:</td> <td><input type="text" /></td> </tr> <tr> <td>手机/固话:</td> <td><input type="text" /></td> </tr> </tbody> </table>
| 性别: | |
| 性别: | |
| 手机/固话: |
旨在说明原理，样式请大家忽略^^
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
