需求:使‘姓名’‘曾用名’‘电子邮箱’对齐
方案:
一 、使用 ;加空格来使文案对齐。缺点:调试起来麻烦,而且最终结果不会太好,字间距不好分摊
二 、使用text-align:justify来调试代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-align测试</title>
<style>
.clear{
clear: both;
overflow: hidden;
}
span{
width: 100px;
text-align: justify;
float: left;
}
span:after{
content:'.';
width: 100%;
display: inline-block;
overflow: hidden;
height: 0;
}
input{
width: 100px;
}
</style>
</head>
<body>
<div class="demo">
<div class="clear">
<span>姓名</span>:<input type="text" >
</div>
<div class="clear">
<span>曾用名</span>:<input type="text" >
</div>
<div class="clear">
<span>家庭住址</span>:<input type="text" >
</div>
</div>
</body>
</html>
效果图如下: