将购物车图标与主徽标对齐-购物

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下；两个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>

如果需要，请让我知道更多细节。