如何使我的这个搜索框在 html 和 css 中响应并水平居中 search_box div？答案

【问题标题】：How to make my this search box responsive in html and css and horizontally center the search_box div?如何使我的这个搜索框在 html 和 css 中响应并水平居中 search_box div？
【发布时间】：2022-02-03 19:58:25
【问题描述】：

问题 1：谁能告诉我如何使这个搜索框响应？因为当我尝试更改屏幕宽度时，按钮会出现在输入字段下方。

问题 2：如何在不使用 display: flex 的情况下将 div class="search_box" div 水平居中； justify-content: center; 在父 div 中？

这是我的代码 sn-p：

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
  rel="stylesheet" integrity="sha384- 
  1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <title>Search Box</title>

  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
   body{
    background-color: rgb(233, 175, 98);
  }
  .parent{
    display: flex;
    justify-content: center; 
    /*See the question number 2*/
  }
  .search_box{
    background-color: white;
    width: 465px;
    height: 50px;
    border-radius: 4px;
    margin-top: 50px;
  }
  .search_box_items{
    border: none;
    border-radius: 4px;
  }
  input{
    width: 370px;
    height: 50px;
    padding-left: 10px;
  }
  button{
    width: 85px;
    height: 43px;
    color: white;
    background-color: rgb(84, 152, 230);
  }
  button:hover{
    background-color: rgb(70, 147, 235);
  }
  button:active{
    background-color: rgb(33, 129, 240);
  }
    </style>

   </head>
   <body>

   <div class="parent">

     <div class="search_box">

       <input class="search_box_items" type="text" placeholder="Search...">

       <button class="search_box_items" type="submit">Search</button>

     </div>

   </div>

   <!-- Option 1: Bootstrap Bundle with Popper -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" 
   integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 
    crossorigin="anonymous"></script>
  </body>
  </html>

【问题讨论】：

标签： html css responsive-design bootstrap-5

【解决方案1】：

首先： html:

<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>

css:

.topnav .search-container {
  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;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}

这样做并看到魔法

   <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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 input[type=text] {
  float: right;
  padding: 6px;
  margin-top: 8px;
  margin-right: 16px;
  border: none;
  font-size: 17px;
}

@media screen and (max-width: 600px) {
  .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <input type="text" placeholder="Search..">
</div>



</body>
</html>

【讨论】：

【解决方案2】：

.parent{
    #display: flex;
    #justify-content: center;
    margin: auto;
    width: 50%
    /*See the question number 2*/
  }

【讨论】：