利用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>