css之文本两端对齐

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

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; /*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;
    }
  }
}

第二种方法并不是所有浏览器都兼容，https://caniuse.com/#search=text-align-last