天天看點

css兩端對齊

text-align: justify;

因為這種屬性必須要超過兩行才能實作,是以在用一個:after模拟成2行

.step1{width: 300px;height: 30px;margin: 20px auto 0;text-align: justify;font-size: 0;}
.step1 i{display: inline-block;width: 16px;height: 16px;overflow: hidden;font-style: normal;line-height: 16px;font-size: 12px;text-align: center;border-radius: 50%;background-color: #333;color: #fff;}
.step1:after{content: "";display: inline-block;position: relative;top: -8px;width: 100%;height: 1px;overflow: hidden;font-size: 0;line-height: 0;background-color: #ccc;z-index: -1;}
           
css