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％-尝试突破版面。我认为这就是您的问题

单击导航栏按钮时，搜索栏宽度正在更改

1 个答案: