平时我们会遇见这样的情况,比如一个表单中的姓名、手机号、邮箱、密码。要求文字两端对齐,我们该如何实现。例如下面这样的效果:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 48px;
height: 60px;
background: #f99;
text-align: justify;
}
.box:after{
content: '';
width: 48px;
display: inline-block; //一定要加上
text-align: justify;
}
.phone {
width: 48px;
height: 60px;
background: #9f9;
text-align: justify;
}
.phone:after{
content: '';
width: 48px;
display: inline-block;
text-align: justify;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
姓名
</div>
<div class="phone">
手机号
</div>
</div>
</body>
</html>
实现两端对齐文本效果
text-align: justify;
参考文章:http://blog.csdn.net/zhaileilei1/article/details/77711856)