方法一：必须是块级元素才能使用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><style>.demo{display: inline-block;width: 100px;text-align: justify;text-align-last:justify;text-justify: distribute-all-lines;/*这行必加，兼容ie浏览器*/}</style></head><body><div><span class="demo">用户名</span>:</div></body></html>
方法二：加空标签
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><style>div{width: 100px;text-align: justify;}div i{content: "";display: inline-block;width: 100%;}</style></head><body><div>用户名<i></i></div></body></html>
方法三：利用::after
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo03</title><style>div{width: 100px;text-align: justify;}div::after{content: "";display: inline-block;width: 100%;}</style></head><body><div>用户名</div></body></html>
