此CSS仅适用于大屏幕，当修改窗口尺寸时，它会偏离正方形

如何解决此CSS仅适用于大屏幕，当修改窗口尺寸时，它会偏离正方形

此CSS仅适用于大屏幕，对于小屏幕，它不成方形。

下面的代码来自导航栏，添加了放大镜图标和圆形边框。但是当将尺寸调整为小屏幕时，放大镜不适合屏幕，如何纠正我的错误？

调整浏览器窗口大小时，我发送错误代码和图像。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {Box-sizing: border-Box;}

body {
  margin: 0;
  font-family: Arial,Helvetica,sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #2196F3;
  color: white;
}

.topnav .search-container {
  float: right;
}

.topnav .search-container input[type=text] {
    position: relative;
    height:50px;
    border: 1px solid #d0d0d0;
    border-radius: 100px;
    margin: 2px 0 0 0px;
    padding: 0px 0px 0 50px;
    outline: 0;  /*not outline field*/
    Box-shadow: 0 0 0 0 rgba(136,136,0);
    font-size: 18px;
    transition: Box-shadow .3s;
    width: 300px;
  
}

.topnav .search-container .search-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    font-size: 20px;
    color: #777777;
    margin:0 0 0 0px;
    padding: 12px 0px 0px 20px;
    z-index: 2;
            }


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

}

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


</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <div class="search-container">
    <form action="/action_page.PHP">
      <div class="search-icon">
      <i class="fa fa-search"></i>
      </div>
      <input type="text" placeholder="Search.." name="search">
    
      <button type="submit">Go</button>
    </form>
  </div>
</div>
<br><br><br>
<div style="padding-left:16px">
  <h2>Responsive Search Bar</h2>
  <p>Navigation bar with a search Box and a submit button inside of it.</p>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

</body>
</html>

解决方法

尝试将position: relative添加到.seach-container。图标现在将保留在搜索框中。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}

body {
  margin: 0;
  font-family: Arial,Helvetica,sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #2196F3;
  color: white;
}

.topnav .search-container {
  position: relative; /* Add this */
  float: right;
}

.topnav .search-container input[type=text] {
    position: relative;
    height:50px;
    border: 1px solid #d0d0d0;
    border-radius: 100px;
    margin: 2px 0 0 0px;
    padding: 0px 0px 0 50px;
    outline: 0;  /*not outline field*/
    box-shadow: 0 0 0 0 rgba(136,136,0);
    font-size: 18px;
    transition: box-shadow .3s;
    width: 300px;
  
}

.topnav .search-container .search-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    font-size: 20px;
    color: #777777;
    margin:0 0 0 0px;
    padding: 12px 0px 0px 20px;
    z-index: 2;
            }


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

}

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


</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <div class="search-container">
    <form action="/action_page.php">
      <div class="search-icon">
      <i class="fa fa-search"></i>
      </div>
      <input type="text" placeholder="Search.." name="search">
    
      <button type="submit">Go</button>
    </form>
  </div>
</div>
<br><br><br>
<div style="padding-left:16px">
  <h2>Responsive Search Bar</h2>
  <p>Navigation bar with a search box and a submit button inside of it.</p>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

</body>
</html>

您需要将输入标记和按钮放入为i创建的div中（真棒字体图标）

更改i（字体超赞图标）的样式

（最好将“提交”按钮放入表单中，或者您可以使用form属性将其链接到您的表单）

像这样：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}

body {
  margin: 0;
  font-family: Arial,sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #2196F3;
  color: white;
}

.topnav .search-container {
  float: right;
}

.topnav .search-container input[type=text] {
    position: relative;
    height:50px;
    border: 1px solid #d0d0d0;
    border-radius: 100px;
    margin: 2px 0 0 0px;
    padding: 0px 0px 0 50px;
    outline: 0;  /*not outline field*/
    box-shadow: 0 0 0 0 rgba(136,0);
    font-size: 18px;
    transition: box-shadow .3s;
    width: 300px;
  
}

.topnav .search-container .search-icon i {
    position: absolute;
    margin-top: 15px;
    margin-left:15px;
    font-size: 20px;
    color: #777777;
    z-index: 2; 
  }


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

}

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


</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <div class="search-container">
    <form action="/action_page.php">
      <div class="search-icon">
      <i class="fa fa-search"></i>
      <input type="text" placeholder="Search.." name="search">
      <button type="submit">Go</button>
      </div>
    </form>
  </div>
</div>
<br><br><br>
<div style="padding-left:16px">
  <h2>Responsive Search Bar</h2>
  <p>Navigation bar with a search box and a submit button inside of it.</p>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

</body>
</html>