对齐主徽标旁边的购物车图标 - 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

是的，在名为logo的div下;徽标图像和购物车都来了。所以为了在同一条线上对齐 例如下面：

<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>

如果需要，请告诉我更多详情。