当我单击导航栏按钮时，我的搜索栏宽度正在改变

Question

在这个应用程序中，当我在导航栏中的主页和关于页面按钮之间切换时，我的搜索栏的宽度正在改变，为什么？？？（仅适用于台式机）。

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

Answer 1

.main-nav {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; margin-right: 30px;&nbsp; &nbsp; justify-content: flex-end;&nbsp; &nbsp; width: 75%; -- ADD THIS TO DETERMINE OVER ALL WIDTH OF THE NAV}.main-nav li:first-of-type{&nbsp; &nbsp; /* padding-right: 25%; */ -- REMOVE THIS&nbsp; &nbsp; width: 50%; -- ADJUST THIS FOR YOUR WIDTH OF SEARCH BAR: WHATEVER PERCENT OF .MAIN-NAV保证金权利：5％；}.search {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; /* width: 150%; */ -- REMOVE THE 150% WIDTH}所以解释一下，你在 flex 中混合了很多固定宽度并试图过度样式来补偿您已将 .main-nav 设置为 flex-end 以将其设置为右侧，您只需使其更大以包含其中的所有内容，<li>而不是强制子元素尝试为 150% 的宽度它的父级 - 它试图打破布局。我认为这是你的问题