CSS topbar：垂直分隔符包装栏的内容

Question

我创建了一个包含HTML和CSS顶部栏的网站。现在我想在顶部栏中的某些图标之间添加一个垂直分隔符，但它不起作用。 首先，当我添加separator-div时，它只显示前三个图标，但既不显示分隔符，也不显示其他图标。 我将display: inline;添加到#topbar，这使得分隔符和其他图标可见，但在顶部栏下方。 我也尝试将white-space: nowrap;添加到#topbar，但它没有效果。

如何让顶部栏中的所有内容都显示在一行？

这是HTML和CSS： https://jsfiddle.net/op28oohx/

Answer 1

这是你期望的吗？

jsfiddle：https://jsfiddle.net/gpkmm360/

将display: inline-block添加到topbar和separator