css之文本两端对齐

标签：pass   uri   lin   文本   class   密码   网页设计   isp   arch   

在进行网页设计时，我们经常会看到这样的样式：文本两端对齐。
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之文本两端对齐

标签：pass   uri   lin   文本   class   密码   网页设计   isp   arch   

原文地址：https://www.cnblogs.com/sunshine21/p/10179702.html