利用text-align:justify实现两端对齐的布局

我们在网页制作中，经常遇到这样的布局，两端对齐布局；此时，为了方便处理，我们可以利用text-aligin:justify;实现这样的布局。

简单代码如下： 

<ul class="teacher-list">
    <li class="list-justify"></li>
    <li class="list-justify"></li>
    <li class="list-justify"></li>
</ul>

<style>

 .teacher-list {
          font-size: 0;
          text-align: justify;
          &:after {
            content: '';
            width: 100%;
            height: 0;
            display: inline-block;
            visibility: hidden;
          }
  }

 .list-justify{

          position: relative;
          margin-bottom: 0.1rem;
          padding-bottom: 0.2rem;
          box-sizing: border-box;
          display: inline-block;
          width: 2.1rem;
          min-height: 3rem;
          border: 1px solid #f28f93;
          border-radius: 0.1rem;
          vertical-align: top;

}

</style>