Html 为什么在我将li设置为“内联块”后，它会在图像下方移动？

我正在尝试创建导航栏，我不知道为什么我会面临这个问题： 尝试将

ul

中的

li

设置为

内联块

有效，但它将整个列表移动到我用作徽标的图像下方。 有人能解释为什么会发生这种情况以及如何解决它吗？

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景色：黑色；
}
img{
显示：内联块；
宽度：100%；
高度：自动；
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
}
.标志{
宽度：150px；
位置：中心；
显示：内联块；
}
#导航条{
背景颜色：黄色；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
显示：内联块；
}
#巴里导航{
显示：内联块；
}

文件

添加

显示：flex；对齐项目：居中将导航栏垂直居中对齐：）

导航栏不在徽标下方，它只是在同一条线上。其外观的原因是徽标图像很高（在浏览器工具中选择它可以看到）

要使导航栏垂直居中于徽标，可以添加
display:flex和
对齐项目：居中到
#导航栏的CSS规则


*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景色：黑色；
}
img{
显示：内联块；
宽度：100%；
高度：自动；
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
}
.标志{
宽度：150px；
位置：中心；
显示：内联块；
}
#导航条{
背景颜色：黄色；
显示器：flex；
对齐项目：居中；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
显示：内联块；
}
#巴里导航{
显示：内联块；
}

文件







在您的
徽标上使用
垂直对齐：中间
#nav-bar {
    background-color: yellow;
    display: flex;
    align-items: center;
}