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 。在此之后，所有的图标都必须向左浮动，这样它们才能排成一行。你有你的代码的方式，你没有通知它你想要并排放置图标 :) 如果你仍然需要一些帮助，我可以帮助你