css - 如何左对齐来 self 的 Magento 商店页脚处的 cms block 的 IMG 元素

Question

问题是该标志出现在 INFO 部分的正下方，而不是下一行的开头，即 ABOUT US 部分的正下方。下面是来自页脚 cms 块的内容。请在回答帖子时解释导致它的原因。谢谢。

    <div class="argento-grid">
    <div class="col-md-9">
    <ul class="footer links argento-grid">
    <li class="col-md-4 col-xs-12">
    <div class="h4" data-role="title">About us</div>
    <ul class="links" data-role="content">
    <li><a href="{{store direct_url=about-us}}">About Us</a></li>
    </ul>
    </li>
    <li class="col-md-4 col-xs-12">
    <div class="h4" data-role="title">Customer center</div>
    <ul class="links" data-role="content">
    <li><a href="{{store direct_url=gift_options}}">Gifts</a></li>
    <li><a href="{{store direct_url=customer/account}}">My Account</a></li>
    <li><a href="{{store direct_url=sales/order/history}}">Order Status</a></li>
    <li><a href="{{store direct_url=wishlist}}">Wishlist</a></li>
    <li><a href="{{store direct_url=terms-and-conditions}}">Returns</a></li>
    </ul>
    </li>
    <li class="col-md-4 col-xs-12">
    <div class="h4" data-role="title">Info</div>
    <ul class="links" data-role="content"><!--<li><a href="{{store direct_url=typography}}">Typography page</a></li>-->
    <li><a href="{{store direct_url=sitemap}}">Site Map</a></li>
    <li><a href="{{store direct_url=terms-and-conditions}}">Returns policy</a></li>
    <li><a href="{{store direct_url=privacy-policy}}">Privacy policy</a></li>
    <li><a href="{{store direct_url=shipping-policy}}">Shipping policy</a></li>
    </ul>
    </li>
    <li class="col-md-4 col-xs-12">
    <div class="h4" data-role="title">WE SHIP TO CANADA</div>
    <ul class="links" data-role="content">
    <li><img src="https://poms.perfectmakeupmirrors.com/images/60a56d2eef203.s4.jpg" alt="Canada Flag"></li>
    </ul>
    </li>
    </ul>
    </div>
    <div class="col-md-3 footer-contacts">
    <div class="h4"><a href="/contact">Contact Us</a></div>
    <a href="/contact"> <strong>1-866-866-5552&nbsp; </strong><span style="font-size: .85em;">7AM - 5PM Pacific Time</span><br><strong>service@perfectMakeupMirrors.com</strong><br><br></a>
    <div>Secure payments with</div>
    <div><img src="https://www.perfectmakeupmirrors.com/pub/media/pmmimg/4Cards300.jpg" alt="Secure Payment" width="300" height="47"></div>
    <a href="/contact"><br></a>
    <div>OR - Pay with your amazon.com account. Get amazon.com guarantees. 100% Secure. Get delivery status updates through Alexa.</div>
    <a href="/contact"><img src="https://www.perfectmakeupmirrors.com/pub/media/pmmimg/amazon-pay.png" alt="Amazon Pay" width="200" height="45"><span id="siteseal"></span> </a></div>
    <div class="social-icons colorize-fa-hover">&nbsp;</div>
    </div>

下图显示了它当前的显示方式。

Answer 1

这是由 float 引起的导致它的属性。
如果您设置 float: initial;在 <li>图像和标题的元素，它将向右对齐。
还设置 clear: left;在元素上会起作用，因为它会将元素推到其他左侧 float 元素下方。