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

Question

尝试了以下无效的 css 代码。网址是https://islandxuntitled.com/

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

Answer 1

查看您的 HTML，您有一个 <ul> ID 为 main-nav 的列表, 其中<li>该列表的元素包含菜单项，特别是要移动的搜索按钮(带有搜索图标)。

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

ul#main-nav {
    /* 
    Create space at left side of menu nav for search button 
    */
    padding-left:2rem;
    position:relative;
}

ul#main-nav #nav-search {
    /* 
    Position search button at absolute left position relative to parent menu nav 
    */
    position:absolute;
    left:0;
    width:2rem;
}