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