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

Question

问题是该标志出现在信息部分的正下方，而不是下一行的开头，即“关于我们”部分的正下方。下面是来自页脚 cms 块的内容。请在回答 post 时也说明是什么原因造成的。谢谢

    <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 属性引起的。如果您在图像和标题的 <li> 元素上设置 float: initial;，它将右对齐。

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

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

How to left align the IMG element coming from cms block from at the footer across my Magento store

css

tags

frontend

magento

content-management-system