将chrome缩放至125或其他比例时图标对齐方式不好？

Question

我从一个模板中获得了以下代码：

我的代码上传到：

JSFIDDLe

<div class="sidebar-body" dir="rtl">
        <div class="side-logo d-flex justify-content-between">
              <div><a href="#"><img src="images/logo.png" alt=""></a>
       </div>
</div>

 <div class="side-contact">
                    <ul class="list-unstyled">
                        <li><i class="la la-map-marker"></i>22222</li>
                        <li><i class="la la-phone"></i>+3333</li>
                        <li><i class="la la-envelope"></i>asdasdasd</li>
                    </ul>
  </div>

CSS：

    .main-menu .sidebar-body .side-contact {
    margin-bottom: 45px;
}

.main-menu .sidebar-body .side-contact ul li {
    color: #666666;
    margin-bottom: 10px;
}

.main-menu .sidebar-body .side-contact ul li i {
    font-size: 18px;
    color: #05ab90;
    margin-top: 1px;
    margin-right: 6px;
    vertical-align: text-bottom;
    float: left;
    height: 30px;
}

100％，200％和...的所有情况都很好，但是当将chrome放大至125（例如）时，最后一个图标对齐会遇到麻烦，并且无法与其他图标对齐。

在jsfiddle上附加实时链接

Answer 1

您需要在每个订单项元素上clear: both。问题是两个float: left图标相互碰撞。将clear添加到每一行将确保新的块开始，因为将浮动元素从内容流中拉出。

.main-menu .sidebar-body .side-contact ul li {
    color: #666666;
    margin-bottom: 10px;
    clear: both;
}