无意中在网上的一些注册页面看到一些让人感觉不太规整的样式，如：
红框内的文字没有两端对齐，感觉很别扭，那么如何让红框内的文字统一两端对齐呢？
于是自己写了个类似的小练习，尝试下将红框内的文字两端对齐。初始的页面如图：
丑到没朋友，重点是根本没有对齐。
解决方案如下：
方案一：在需要的地方用空格占位符 去凑对齐。
代码：
<body> <p> <span>用 户 名</span> <input type="text"/> </p> <p> <span>密 码</span> <input type="text"/> </p> <p> <span>手 机 号</span> <input type="text"/> </p> <p> <span>验 证 码</span> <input type="text"/> </p> </body>
效果如下：
虽然能达到预期的效果，但是这不是解决问题的根本办法，于是就有了第二种方案。
方案二：
给span标签加可让其中的内容保持两端对齐的样式(推荐)
代码：
<style type="text/css"> span{ width: 70px; height: 30px; display: inline-block; text-align-last: justify; -webkit-text-align-last:justify; -moz-text-align-last:justify; } </style> </head> <body> <p> <span>用户名</span> <input type="text"/> </p> <p> <span>密码</span> <input type="text"/> </p> <p> <span>手机号</span> <input type="text"/> </p> <p> <span>验证码</span> <input type="text"/> </p> </body>
效果：
