當我單擊導航欄按鈕時，我的搜索欄寬度正在改變

Question

在這個應用程序中，當我在導航欄中的主頁和關於頁面按鈕之間切換時，我的搜索欄的寬度為什么會改變？？？ （僅適用於台式機）。

我的代碼： https : //github.com/StrikerOne65/snewz

Answer 1

.main-nav {
    display: flex;
    margin-right: 30px;
    justify-content: flex-end;
    width: 75%; -- ADD THIS TO DETERMINE OVER ALL WIDTH OF THE NAV
}

.main-nav li:first-of-type{
    /* padding-right: 25%; */ -- REMOVE THIS
    width: 50%; -- ADJUST THIS FOR YOUR WIDTH OF SEARCH BAR: WHATEVER PERCENT OF .MAIN-NAV

右邊距：5%； }

.search {
    display: flex;
    /* width: 150%; */ -- REMOVE THE 150% WIDTH
}

所以解釋一下，你在 flex 中混合了很多固定寬度並試圖過度設計來補償

您已將 .main-nav 設置為 flex-end 以將其設置為右側，您只需要將其放大以包含其中的<li>所有內容，而不是強制子元素嘗試為 150 % 其父級的寬度 - 它試圖打破布局。 我認為這是你的問題