我在页面顶部有一个部分显示这些项目:搜索(显示在左上角),登录/注册(每个都链接到登录页面或注册页面;显示在中间),以及购物车(如右上图所示)。它们都在一个块中对齐。
我正在努力使搜索显示在现在的位置(左上角),然后购物车就在现在(右上角),但登录/注册也应该在右上角在购物车正上方。
LOGIN/SIGNUP
SEARCH CART
请参阅此link
我玩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.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>
答案 0 :(得分:1)
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>