[英]My search bar width is changing when i click navbar button
In this app when I toggle between home and about page button in the navbar,My search bar's width is changing why???在这个应用程序中,当我在导航栏中的主页和关于页面按钮之间切换时,我的搜索栏的宽度为什么会改变??? (For desktop only).
(仅适用于台式机)。
My Code: https://github.com/StrikerOne65/snewz我的代码: https : //github.com/StrikerOne65/snewz
.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
margin-right: 5%;右边距:5%; }
}
.search {
display: flex;
/* width: 150%; */ -- REMOVE THE 150% WIDTH
}
So to explain, you are mixing a lot of fixed widths within flex and trying to overstyle to compensate所以解释一下,你在 flex 中混合了很多固定宽度并试图过度设计来补偿
The .main-nav you have set to flex-end to set it to the right, you just needed to make it larger to contain all of the content of the <li>
within it and not force an child element to try to be 150% width of its parent - its trying to break out of the layout.您已将 .main-nav 设置为 flex-end 以将其设置为右侧,您只需要将其放大以包含其中的
<li>
所有内容,而不是强制子元素尝试为 150 % 其父级的宽度 - 它试图打破布局。 I think its this that is your issue我认为这是你的问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.