寫一個導航欄遇到的問題

總體效果

導航欄樣式

指望效果

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 用百分比來描述