搜索栏无法正确响应媒体查询

Question

我有一个导航栏，该导航栏具有四个相邻显示的链接，以及一个向右浮动的购物车按钮。

[我添加了一个搜索栏，它弄乱了购物车按钮的显示，但我似乎已解决了它的显示问题，负边距。

但是，现在屏幕低于705像素时（当搜索栏可能会成为调整大小的问题时），并且切换到移动样式导航栏时，搜索栏与购物车链接显示在同一行。我似乎无法让它转向自己的路线。

HTML＆JavaScript：

<script>
      /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
      function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
          x.className += " responsive";
        } else {
          x.className = "topnav";
        }
      }
    </script>
  </head>
  <!--Nav Bar-->
  <nav class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#merchants">Merchants</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <div class="search-container">
      <form action="/action_page.php">
        <input type="text" placeholder="Search.." name="search" />
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
    </div>
    <a class="right" href="#cart">Cart <i class="fas fa-shopping-cart"></i></a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </nav> 

CSS：

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

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* Move the class "right" to the right side of the page */
.topnav a.right {
  float: right;
  border-left: 1px solid #6b6b6b;
}
/* Change the color of links on hover */
.topnav a:hover {
  background-color: #eeff00;
  color: black;
}

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

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

/* search bar styling */
.topnav .search-container {
  margin-right: -10px;
  float: right;
}

.topnav input[type="text"] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}

/* When the screen is less than 705 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: 705px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav div {
    display: none;
    margin-top: 10px;
  }
}

/* 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: 705px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive div {
    clear: both;
    display: block;
    text-align: left;
  }
}

Answer 1

您的意思是，当屏幕大于705px时，购物车链接应显示在右侧，但searchform仍在单独的行上？您没有在购物车链接的正确类上设置样式，请在其上添加float：right。您的第二个媒体查询设置为最大宽度，您需要将其设置为最小宽度。