gpt4 book ai didi

css - 将购物车图标与主 Logo 对齐 - Shopify

转载 作者:行者123 更新时间:2023-11-28 07:46:05 28 4
gpt4 key购买 nike

我试图将 Logo 和购物车图标对齐在同一行。 Logo 和购物车图标之间也应该有一些空间。检查部分 //...moved this code here - start。那是我添加的代码。它早些时候位于 ul 标记中。移到这里。

<div class="row">
<div id="logo" class="desktop-12 mobile-3">
{% if settings.use_logo_image %}
<a href="/"><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" style="border: 0;"/></a>
{% else %}
<a href="/">{{ shop.name }}</a>
{% endif %}

//...moved this code here - start
<ul id="cart" class="{% if settings.enable-hello %}desktop-3 {% else %}desktop-6{% endif %} tablet-6 mobile-3">
<li class="cart-overview"><a href="/cart"><i class="icon-shopping-cart icon-2x"></i><span id="item_count">{{ cart.item_count }}</span></a>
<div id="crt">
{% include 'shopping-cart' %}
{% if cart.item_count != 0 %}
<a class="checkout-link" href="/cart">{{ 'cart.general.checkout' | t }}</a>
{% endif %}
</div>
</li>
</ul>
//...moved this code here - end

</div>
</div>

这是我现在得到的输出。 enter image description here

这是我期待的输出。 enter image description here

最佳答案

是的所以在div命名的log​​o下; Logo 图像和购物车都来了。所以为了在同一行对齐例如下面:

<div class="logo">
<div class="logoimg"></div>
<div class="cartimg"></div>
</div>

风格变得像 eg:

<style>
.logo{display:inline-block;width:900px}
.logoimg{float:left;width:400px;}
.cartimg{float:right;width:400px;}
</style>

如果需要,请告诉我更多详细信息。

关于css - 将购物车图标与主 Logo 对齐 - Shopify,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30684469/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com