使用 Shopify 定位或浮动到右上角

Question

我在页面的最顶部有一个部分显示了这些项目：搜索（显示在左上角），login/signup（每个都链接到登录页面或注册页面；显示在中间）和购物车（显示在右上角）。它们都在一个块中对齐。

我正在努力使搜索显示在现在的位置（左上角），然后购物车显示在现在的位置（右上角），但 login/signup 应该打开右上角和购物车正上方。

                                               LOGIN/SIGNUP
SEARCH                                         CART

看到这个link

我试了一下 float 我无法正确对齐。我试图在下面的 ul 顶部添加另一个 div 并将其浮动到右侧，但它在 Shopify liquid 模板上有点错位。有什么建议么？非常感谢！

<ul class="header-tools clearfix">
    <li class="search accent-text">
       {% include 'search' %}
    </li>
    <li class="account-details">
       {% include 'account-details' %}
    </li>
    <li class="cart-details accent-text">
       <a href="/cart"><span class="cart-icon">c</span><span class="cart-item-count-wrap">{{ 'cart.mini_cart.item_count_html' | t: count: cart.item_count }}</span> - <span class="cart-amount-wrap money">{{ cart.total_price | money }}</span></a>
    </li>
     </ul>

Answer 1

li 是 block-level 个元素。尝试改用 span 和绝对定位。另一个解决方案是 parent div with clearfix hack 和 2 children divs:

<div id="header" class="clearfix">
   <div id="search"></div>
   <div id="loginSignupandCart"></div>
</div>

<style>
.clearfix::after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
#search{
  float: left;
}
#loginSignupandCart{
  float: right;
}
</style>

使用 Shopify 定位或浮动到右上角

Position and or float to the top right one on top with Shopify

html

css

liquid

css-float

shopify