登录页面两端对齐的样式问题

无意中在网上的一些注册页面看到一些让人感觉不太规整的样式，如：

红框内的文字没有两端对齐，感觉很别扭，那么如何让红框内的文字统一两端对齐呢？

于是自己写了个类似的小练习，尝试下将红框内的文字两端对齐。初始的页面如图：

丑到没朋友，重点是根本没有对齐。

解决方案如下：

方案一：在需要的地方用空格占位符&nbsp去凑对齐。

代码：

<body>
<p>
<span>用&nbsp;户&nbsp;名</span>
<input type="text"/>
</p>
<p>
　　<span>密&nbsp;&nbsp;&nbsp;码</span>
　　<input type="text"/>
</p>
<p>
　　<span>手&nbsp;机&nbsp;号</span>
　　<input type="text"/>
</p>
<p>
　　<span>验&nbsp;证&nbsp;码</span>
　　<input type="text"/>
</p>

</body>
View Code

 

效果如下：

虽然能达到预期的效果，但是这不是解决问题的根本办法，于是就有了第二种方案。

方案二：

 给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>
View Code

 

 效果：

 

posted @ 2017-02-08 00:03  黑夜蓝天  阅读(1626)  评论(0)  编辑  收藏  举报