gpt4 book ai didi

html - 使用 Shopify 定位或 float 到右上角

转载 作者:太空宇宙 更新时间:2023-11-04 10:18:34 25 4
gpt4 key购买 nike

我在页面的最顶部有一个部分,其中显示了这些元素:搜索(显示在左上角)、登录/注册(每个都链接到登录页面或注册页面;显示在中间),以及购物车(显示在右上角)。它们全部对齐在一个 block 中。

我正在努力使搜索显示在现在的位置(左上角),然后购物车显示在现在的位置(右上角),但登录/注册也应该在右上角就在购物车上方。

                                               LOGIN/SIGNUP
SEARCH CART

查看此 link

我玩弄了 float 我无法正确对齐它。我试图在下面的 ul 顶部添加另一个 div 并将其 float 到右侧,但它在 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>

最佳答案

li 是 block 级元素。尝试改用 span 和绝对定位。另一种解决方案是使用 clearfix hack 和 2 个子 div 的父 div:

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

关于html - 使用 Shopify 定位或 float 到右上角,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37032766/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com