搜索栏未正确响应媒体查询

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 时，搜索表单仍然在自己的一行？ 您没有在购物车链接的正确类上设置样式，请添加 float:right 。您的第二个媒体查询设置为最大宽度，您需要将其设置为最小宽度。

Answer 2

将这四个选择器添加到您的 CSS 文件中，搜索按钮将显示在 705px 下的一行：

  .topnav.responsive .search-container {
    float: none;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
   .topnav.responsive input[type=text] {
    float: none;
    display:inline-block
    text-align: left;
    width: 80%;
    margin: 0px;
    padding: 14px;
  }
   .topnav.responsive .search-container button{
    float: none;
    display:inline-block
  }

the solution if the screen is smaller than 705px

我希望这是您正在寻找的解决方案