<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本两端对齐模板-案例</title>
<style type="text/css">
/*文本两端对齐*/
.text-justify{float:left;text-align:justify;text-justify:inter-word;text-justify:inter-ideograph;width:80px;height:20px;}
.span-justify{display:inline-block;width:100%;}
</style>
</head>
<body>
<form>
<div>
<div>
<label class="text-justify">用 户 名：<span class="span-justify"></span></label><input type="text" name="username" placeholder="请输入用户名" />
</div>
<div>
<label class="text-justify">密 码：<span class="span-justify"></span></label><input type="password" name="password" placeholder="请输入用户密码" />
</div>
</div>
</form>
</body>
</html>
