Html 如何在导航栏中包含徽标，而不影响内容的响应性和对齐？

我不知道如何将徽标代码放入html文件中，这样就不会干扰内容的对齐

我为logo创建了一个名为“logo container”的div，它位于导航栏的左侧。然而，如前所述，当我最小化浏览器窗口时，它到处都是。如果没有整个“徽标容器”，导航栏和登录输入容器都会很好地协调一致

你会如何让它工作

*{
框大小：边框框；
}
身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
托普纳夫先生{
溢出：隐藏；
背景色：暗色；
}
.topnav a{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：18px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.topnav a.active{
背景色：#555；
颜色：白色；
}
.topnav.login容器{
浮动：对；
}
.topnav输入[类型=文本]{
填充：6px；
边缘顶部：8px；
字号：17px；
边界：无；
宽度：120px；
}
.topnav.login容器按钮{
浮动：对；
填充：6px 10px；
边缘顶部：8px；
右边距：16px；
背景色：黑色；
颜色：白色；
字号：17px；
边界：无；
光标：指针；
}
.topnav.login容器按钮：悬停{
背景色：#555；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.login容器{
浮动：无；
}
.topnav a，
.topnav输入[类型=文本]，
.topnav.login容器按钮{
浮动：无；
显示：块；
文本对齐：左对齐；
宽度：100%；
保证金：0；
填充：14px；
}
.topnav输入[类型=文本]{
边框：1px实心#ccc；
}
}

梦幻车
登录
Navbar中的响应式登录表单
导航菜单，其中包含登录表单和提交按钮

调整浏览器窗口的大小以查看响应效果

通常，您希望图像基于实际大小，这样就不会有任何矢量缩放。当然，您可以使用

%

。嗯，徽标不是图片，而是文本。