写一个导航栏遇到的问题

整体效果

导航栏样式

期望效果

1.左右红色区域宽度能够一致
①②在html里要设定 style="float:left;"
③④在html里要设定 style="float:right;"

css里定义

       ① {margin-left:8%;}
       ④ {margin-right:8%;}

2.搜索框③里的搜索icon能够和搜索框重合

html里设定，搜索框和搜索按钮重合，两个元素都要声position：absoulute,缺一不可。
如下：

<div class="top-header-search" style="float:right; position:relative">

                        <li class="right" style="position:absolute;left:0;top:0">
                            <object class="header-search-img" data="assets/img/home-page/Search.svg" type="image/svg+xml" style="">
                            </object>
                        </li>
                        <li class="right" style="position:absolute;left:0;top:0">
                            <input id="header-search-input" class="ui-autocomplete-input" autocomplete="off">
                        </li>
                    </div>

再去css里设定搜索icon距离搜索框的距离

3.当窗口缩小至一定区域，导航栏无法显示全部内容，有一部分能够被隐藏
@media and screen（写上范围）
.想要溢出隐藏的class{overflow:hidden;}

4.响应式导航栏
导航栏中的每一个class直接的左右padding margin 用百分比来描述