使用Shopify定位和/或浮动到右上角(Position and or float to the top right one on top with Shopify)

使用Shopify定位和/或浮动到右上角(Position and or float to the top right one on top with Shopify)

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

我正在努力使搜索显示在现在的位置（左上角），然后购物车就在现在的位置（右上角），但登录/注册应位于右上方大车。

LOGI/SIGUP SEARCH CART

看到这个链接

我玩float我无法正确对齐它。 我尝试在下面的ul顶部添加另一个div并将其浮动到右边但是在Shopify液体模板上它有点不对齐。 有什么建议么？ 非常感谢！

<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.item_count_html' | t: count: cart.item_count }}</span> - <span class="cart-amount-wrap money">{{ _price | money }}</span></a> </li> </ul>

I have a section on the very top of the page where it shows these items: search (shown on the top left), login/signup (each are linked to login page or signup page; shown in the middle), and cart (shown on top right). They are all aligned in one block.

I'm trying to make it so that the search is shown where it is now (top left), then the cart is where it is now (top right), but the login/signup should be on top right as well right above the cart.

LOGI/SIGUP SEARCH CART

See this link

I played around with float I couldn't align it properly. I tried to add another div on top of the ul below and float it to the right but it's all a bit misaligned on Shopify liquid template. Any suggesti? Thanks a lot!

<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.item_count_html' | t: count: cart.item_count }}</span> - <span class="cart-amount-wrap money">{{ _price | money }}</span></a> </li> </ul>

最满意答案

li是块级元素。 尝试使用跨度和绝对定位。 另一个解决方案是使用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>

li's are block-level elements. Try using spans and absolute positioning instead. Another solution would be a parent div with clearfix hack and 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>