html - 带有点击搜索栏的响应式导航栏

Question

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

我让它在桌面模式下工作，但我在移动 View 上遇到了困难。

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

下面我附上了3张图片:

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

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

https://jsfiddle.net/kLo8x29u/

  <div class="topnav" id="myTopnav">      

  <a class='home'href="#">Home</a>
  <a href="#">Building Materials</a>
  <a href="#">Timber and Hardwood</a>
  <a href="#">Landscaping</a>
  <a href="#">Kitchens and Bathrooms</a>
  <a href="#">Tools</a>
  <a href="#">Flooring</a>
  <a href="#">Tool Hire</a>
  <a class='timber' href="#a">Timber Enginering</a>

       <a href="javascript:void(0);" class="icon" onclick="myFunction()">
   <i class="fa fa-bars" style="font-size:56px"><p>Home</p></i>
  </a>
    </div>

提前致谢!

Answer 1

如果你想对齐你的图标，你必须将图标和菜单放在同一个带有id的div中；然后你给它一个相对位置并显示内联 block 。在此之后，所有的图标都必须向左浮动，这样它们才能排成一行。你有你的代码的方式，你没有通知它你想要并排放置图标 :) 如果你仍然需要一些帮助，我可以帮助你