對齊購物車圖標旁邊的主要標誌 - Shopify

Question

我想對齊標誌和購物車圖標在同一行。此外，徽標和購物車圖標之間應該有一些空間。檢查零件//...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> 

這是我現在得到的輸出。

這是我期待的輸出。

Answer 1

是的，所以在div下命名爲logo;徽標圖像和購物車都出現了。因此，在序同一行 對準例如下面：

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

風格變得像如：

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

讓我知道更多的細節，如果需要的。