Django：创建一个分为两部分的导航栏，元素样式不同（HTML、CSS、Javascript）

我正在尝试在响应导航栏中创建搜索按钮。 导航栏在CSS文件中有一个媒体查询，根据阅读器屏幕的尺寸将其缩小为下拉列表

导航栏的html如下所示：

  <nav class="navbarSection">
    <div class="topnav" id="myTopnav">
      <a href="#home" class="active">Home</a>
      <a href="http://www...">Chi Siamo e Cosa Facciamo</a>
      <a href="http://www...">Storia di Gabriella</a>
      <a href="#articles">Tutti gli Articoli</a>
      <a href="http://www...">Video Gallery</a>
      <a href="http://www...">Photo Gallery</a>
      <a href="http://www...">Dicono di Noi</a>
      <a href="http://www...">Come Contattarci</a>
      <a href="javascript:void(0);" class="icon" onclick="respScreen()">&#9776;</a>
      <a class="material-icons" style="font-size:32px;color:white;">search</a>
    </div>
  </nav>

这是Firefox响应式设计模式的实际结果，模拟了Iphone 6s

以下是关闭菜单后的结果：

在打开下拉列表的结果下方

我已使用Pinta Image Editor在关闭菜单的情况下获得了所需的结果：

和下面的菜单打开

为了获得期望的结果，我尝试将导航栏拆分为两个不同的

div

s，但它似乎在第一个导航栏的底部创建了另一个导航栏，而不是将它们都内联（请参见下面的代码）：

HTML

如果需要，项目的完整存储库是可用的

编辑1：为可能的解决方案添加了代码。

找到了解决方案

为常规导航栏创建一个div容器并内联显示其元素

HTML

/* Add a red background color to the top navigation */
.topnav {
    background-color: #aa2222;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 15px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #d9bb56;
    color: black;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #d9bb56;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home").
Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1500px) {
  .topnav a {display: none;}
  .topnav a.icon {
    float: left;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon.
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1500px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Style of the search button inside the navigation bar */

.material-icons {
float: right
width: 52px !important;
font-size: 20px !important;
padding-top: 11px !important;
padding-bottom: 13px !important;
}

<nav class="navbarSection">
        <div class="topnav" id="myTopnav">
          <a href="#home" class="active">Home</a>
          <a href="http://www...">Chi Siamo e Cosa Facciamo</a>
          <a href="http://www...">Storia di Gabriella</a>
          <a href="#articles">Tutti gli Articoli</a>
          <a href="http://www...">Video Gallery</a>
          <a href="http://www...">Photo Gallery</a>
          <a href="http://www...">Dicono di Noi</a>
          <a href="http://www...">Come Contattarci</a>
          <a href="javascript:void(0);" class="icon" onclick="respScreen()">&#9776;</a>
        <div class="rightNavbar">
          <button>
            <a class="material-icons" style="font-size:32px color:white;">search</a>
          </button>
        </div>
</nav>

.rightNavbar {
float: right
}

navbarSection {
float: left
}

  <section class="navbarSection">
    <div class="topnav" id="myTopnav">
      <a href="#home" class="active">Home</a>
      <a href="http://www....">Chi Siamo e Cosa Facciamo</a>
      <a href="http://www....">Storia di Gabriella</a>
      <a href="#articles">Tutti gli Articoli</a>
      <a href="http://www....">Video Gallery</a>
      <a href="http://www....">Photo Gallery</a>
      <a href="http://www....">Dicono di Noi</a>
      <a href="http://www...">Come Contattarci</a>
      <a href="javascript:void(0);" class="icon" onclick="respScreen()">&#9776;</a>
    </div>
    <div class="right-nav" id="myRightNav">
      <a class="material-icons" style="font-size:32px;color:white;">search</a>
    </div>
  </section>

.navbarSection {
display: inline;
}

.topnav {
float:left
}

.right-nav {
float:right;
background-color: #aa2222;
overflow: hidden;
}