我们在网页制作中,经常遇到这样的布局,两端对齐布局;此时,为了方便处理,我们可以利用text-aligin:justify;实现这样的布局。
简单代码如下:
<ul class="teacher-list">
<li class="list-justify"></li>
<li class="list-justify"></li>
<li class="list-justify"></li>
</ul>
.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>