Html 在固定标题中对齐图片和导航部分时出现问题

我正在尝试使用flexbox方法放置徽标和导航部分。出于某种原因，它没有对齐。还有人能解释我做错了什么吗 我可以尝试使用“float”属性，但我只想使用flexbox方法

正文{
保证金：0；
字体系列：“Helvetica”，“Times New Roman”，无衬线；
颜色：贝壳；
背景色：黑色；
字体大小：22px；
文本对齐：居中；
不透明度：0.9；
}
a{
颜色：贝壳；
}
.柔性容器{
显示器：flex；
证明内容：中心；
柔性包装：包装；
}
标题{
宽度：100%；
位置：固定；
z指数：1；
高度：69px；
背景色：黑色；
边框底部：1个实心贝壳；
对齐项目：居中；
}
收割台img{
高度：50px；
左侧填充：10px；
}
导航{
文本对齐：右对齐；
柔性生长：1；
}
导航跨度{
显示：内联块；
填充：20px 10px；
}

---

您是否尝试添加

显示：内联块

到

导航

，这将使它们一起内联显示

正文{
保证金：0；
字体系列：“Helvetica”，“Times New Roman”，无衬线；
颜色：贝壳；
背景色：黑色；
字体大小：22px；
文本对齐：居中；
不透明度：0.9；
}
a{
颜色：贝壳；
}
.柔性容器{
显示器：flex；
证明内容：中心；
柔性包装：包装；
}
标题{
宽度：100%；
位置：固定；
z指数：1；
高度：69px；
背景色：黑色；
边框底部：1个实心贝壳；
对齐项目：居中；
}
收割台img{
高度：50px；
左侧填充：10px；
}
导航{
文本对齐：右对齐；
柔性生长：1；
显示：内联块；
}
导航跨度{
显示：内联块；
填充：20px 10px；
}

---

这就是你想要做的吗？ 使用显示：flex；在标题处，因为它是flex元素的父容器

正文{
保证金：0；
字体系列：“Helvetica”，“Times New Roman”，无衬线；
颜色：贝壳；
背景色：黑色；
字体大小：22px；
文本对齐：居中；
不透明度：0.9；
}
a{
颜色：贝壳；
}
.柔性容器{
显示器：flex；
柔性包装：包装；
}
标题{
宽度：100%；
位置：固定；
z指数：1；
高度：69px；
背景色：黑色；
边框底部：1个实心贝壳；
对齐项目：居中；
显示器：flex；
}
收割台img{
高度：50px；
左侧填充：10px；
}
导航{
文本对齐：右对齐；
柔性生长：1；
}
导航跨度{
显示：内联块；
填充：20px 10px；
}

我已经试过了，但没用。另外，我已经为“导航跨度”准备了它。你认为你可以根据预期的行为创建一个插图吗。因为我的代码片段内联显示了这两个项目。在我的浏览器中，徽标居中，导航位于右侧，但在标题下。我仍然很困惑，这是当前正在发生的还是您想要的。它起作用了。谢谢我仍然有点困惑，为什么它适用于另一个家伙，他在标题中没有“display:flex”属性，但只在类中。flex container“@PredragAranđelović容器拼写错误，第一个用户的代码和第一个用户没有在标题上使用flex属性，而是使用了display inline。但是我在flex容器中使用了display flex，因此使用display flex和display inline都很有效