在进行网页设计时，我们经常会看到这样的样式：文本两端对齐。

css为我们提供了一个属性可以实现这样的效果：text-align: justify。不过这个只能用来设置多行文本（除最后一行）。如果只有单行的话，是不起效果的。那怎么办呢？这里有两种解决方案：

第一种

借助伪元素或者内联元素使文本不是最后一行。具体代码：

    
  
     
    用户名:      
  
     
    密码:      
    

scss代码：

form {  p {    height: 20px;    line-height: 20px;    label {      display: inline-block;      width: 60px;      text-align: justify;      vertical-align: top;      &:after {        display: inline-block; /*vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。*/        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;    }  }}

第二种方法并不是所有浏览器都兼容，