中文上下两端对齐（css）
2018-08-13 本文已影响0人
冰冰啦
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="clearfix">
<span>姓名</span><br>
<span>联系方式</span>
</div>
</body>
</html>
2.css
div{
border:1px solid red;
font-size:20px;
}
span{
display:inline-block;
border:1px blue solid;
width:100px;
text-align:justify;
line-height:20px;
height:20px;
overflow:hidden;
}
span::after{
content: '';
display:inline-block;
width:100%;
border:1px green solid;
}
3.效果
