Question

所以我已经从最初的布局改变了这个，但这就是我的导航栏目前的样子：

这就是我拙劣的代码：

<nav class="nav-bar" role="navigation">
<div class="wrapper">      
  <div class="grid">
      <div class="grid-item large--one-half">
        {% include 'site-nav' %}
      </div>

      <div class="grid-item large--one-half text-right">
        <a href="/cart" class="header-cart-btn cart-toggle">
        <span class="icon icon-cart"></span>
        {{ 'layout.cart.cart' | t }} <span class="cart-count cart-badge--desktop {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span>
        </a> 
      </div>
  </div>
</div>
</nav>

所以我的问题是：是否还有其他一些可以写入以使导航按钮和购物车按钮相互匹配的问题？我已经玩了几个小时的游戏并且无处可去:(

提前致谢

劳拉：）

Answer 1

你的“网格项目大 - 一半”类导致网格项分成两半。例如，如果要为其添加“text-align：center”，则菜单将居中于父div的限制。您必须将菜单div设为页面宽度的100％，然后将购物车链接置于绝对位置。

.cart {
position: absolute;
top: 7px;
right: 3%;
line-height: 50px;}

在使链接具有相同高度方面，您可以为所有内容添加行高，以便文本将以定义的高度为中心。

我创建了一个快速小提琴，帮助您回答其中的一些问题作为参考。

https://jsfiddle.net/zsrjmLrd/

Shopify供应主题 - 如何将导航栏上的项目垂直居中？

1 个答案: