Html 徽标CSS导航栏不断爆炸

我意识到这个问题以前被不同的海报问过，但我尝试了很多建议性的答案，但似乎都不起作用。 将我的徽标输入导航栏时，它会不断扩展。但是，导航栏中保留了

插槽，因为

left

类确实留出了空间，但只保留了指定的8%宽度，而不是40%

ul.navbar{
宽度：100%；
高度：50px；
线高：50px；
列表样式类型：无；
填充：0；
背景色：#5D6576；
不透明度：0.8；
边界：无；
}
li.logo{
浮动：左；
宽度：40%；
}
李，左{
浮动：左；
颜色：白色；
宽度：8%；
}
李，左a{
显示：块；
颜色：白色；
文本对齐：居中；
文字装饰：无；
}
李娜：停下来{
背景色：#BC80BB；
过渡：1s；
}
李，对{
浮动：对；
宽度：4%；
}

我在这里向您发送代码和链接。请检查一下。如果有任何变化，请告诉我

。标题菜单{
显示器：flex；
背景色：#5D6576；
不透明度：0.8；
宽度：100%；
高度：50px；
线高：50px；
对齐项目：居中；
证明内容：之间的空间；
}
.导航栏左侧，
.导航栏对吗{
显示器：flex；
列表样式类型：无；
填充：0；
边界：无；
}
navbar先生离开了li，
navbar先生，对吗{
右边填充：15px
}
.导航栏左李a:悬停，
.导航栏右侧李a：悬停{
颜色：#fff；
}
.标志{
显示：块；
右边填充：20px；
}
.标志菜单{
显示器：flex；
对齐项目：居中；
}

在@Revti Shah回答之后，为了防止跳出导航，您需要添加以下内容

overflow: hidden;

在代码中

ul.navbar

或者在她的密码里

header-menu

---

不要在布局中浮动内容，除非文本中的图像或元素应该环绕。改用

display:flex

。您能准确描述您的输出吗？或者请分享图片。所以我可以做你想要的。顶部是我想要的，底部是现在的样子。当我将鼠标悬停在列表项（徽标除外）上时，颜色需要更改。正如你在我的主要帖子中看到的那样，现在这种情况发生得很正确。我给你发了一个代码。请检查一下，谢谢！这绝对是朝着正确的方向迈出的一步，但是我的徽标比导航栏高。当我试图通过添加

高度来限制它时：50px它再次跳出指定位置。我应该在图像中硬编码吗？你应该使用flex属性。所以代码对您来说非常简单。