如何将搜索图标移到标题的左侧和菜单的右侧

Question

尝试了以下无效的CSS代码。该网站为https://islandxuntitled.com/

#search-icon {
position: relative;
left: 500px;
}

Answer 1

看看您的HTML，您有一个ID为<ul>的{​​{1}}列表，其中该列表中的main-nav项包含菜单项，尤其是搜索按钮（带有搜索图标）进行切换。

有几种方法可以实现搜索按钮/图标的最左侧放置-一种简单的选择是添加以下CSS：

<li>

Answer 2

这是解决方案：

ul#main-nav{
 display:flex; 
 align-items:center;
}

ul#main-nav li#menu-item-4154{
order:1;
}

ul#main-nav li#nav-search{
order:0;
}

ul#main-nav li#hb-cart-count{
order:2;
}

此外，如果您想在最左侧显示搜索图标，则：

ul#main-nav{
 display:flex; 
 align-items:center;
 width:100%;
 justify-content:flex-end;
}

ul#main-nav li#menu-item-4154{
order:1;
}

ul#main-nav li#nav-search{
order:0;
margin-right:auto!important;
}

ul#main-nav li#hb-cart-count{
order:2;
}