在进行网页设计时，我们经常会看到这样的样式：文本两端对齐。
css为我们提供了一个属性可以实现这样的效果：text-align: justify。不过这个只能用来设置多行文本（除最后一行）。如果只有单行的话，是不起效果的。那怎么办呢？这里有两种解决方案：
第一种
借助伪元素或者内联元素使文本不是最后一行。具体代码：
<form> ?<p> ???<label>用户名</label>: ???<input type="text"> ?</p> ?<p> ???<label>密码</label>: ???<input type="password"> ?</p></form>scss代码：
form { ?p { ???height: 20px; ???line-height: 20px; ???label { ?????display: inline-block; ?????width: 60px; ?????text-align: justify; ?????vertical-align: top; ?????&:after { ???????display: inline-block; ???????width: 100%; ???????content: ‘‘; ?????} ???} ?}}第二种
text-align-last: justify;
scss代码：
form { ?p { ???height: 20px; ???line-height: 20px; ???label { ?????display: inline-block; ?????width: 60px; ?????text-align: justify; ?????text-align-last: justify; ???} ?}}第二种方法并不是所有浏览器都兼容，https://caniuse.com/#search=text-align-last
css之文本两端对齐
原文地址：https://www.cnblogs.com/sunshine21/p/10179702.html