如何左对齐来自我的 Magento 商店页脚的 cms 块的 IMG 元素答案

【问题标题】：How to left align the IMG element coming from cms block from at the footer across my Magento store如何左对齐来自我的 Magento 商店页脚的 cms 块的 IMG 元素
【发布时间】：2021-10-09 02:58:38
【问题描述】：

问题是该标志出现在 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>

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

【问题讨论】：

标签： css magento tags frontend content-management-system

【解决方案1】：

这是由导致它的float 属性引起的。如果在图片和标题的<li>元素上设置float: initial;，它会向右对齐。

在元素上设置clear: left; 也会起作用，因为它会将元素推到其他左浮动元素的下方。

【讨论】：