开发时偶尔会遇到这种需求,要求文字两端对齐,例如这样

具体实现方法有两种,一种是这种比较复杂的(我甚至不愿意手敲)

另一种办法是利用text-align-last: justify方法,简单易用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<lable>
<span>
姓名
</span>
</lable>
<br>
<lable>
<span>
联系方式
</span>
</lable>
</body>
</html>
span{
display: inline-block;
width: 80px;
border: 1px solid red;
text-align-last: justify;
}
效果图

网友评论