具有onclick搜索栏的响应式导航栏

Question

我正在尝试制作一个响应式导航栏，与我网站上的其他几个图标一致。

我让它在桌面模式下工作，但我正在努力使用移动视图。

我遇到的主要问题是我无法折叠搜索栏，因此当您点击放大镜时，搜索栏会弹出导航栏下方。 排列所有5个图标，使其看起来整洁。

下面我附上了3张图片：

第一个是我目前在我网站上的位置 第二个网站是我想要实现的目标 第三个是在搜索栏工作的情况下它在桌面模式下的外观。

我还附上了一个js Fiddle，其中包含了我目前拥有的所有内容。

https://jsfiddle.net/kLo8x29u/

{{1}}

提前致谢！

Answer 1

如果要对齐图标，则必须将图标和菜单放在带有id的同一div中;然后你给它一个位置相对并显示内联块。在此之后，所有图标必须向左浮动，以便它们排成一行。你拥有代码的方式，你没有告诉它你想要并排的图标:)如果你还需要一些帮助，我可以帮助你