如何使用过滤器按钮构建重叠搜索栏答案

【问题标题】：How can I build a overlapping search bar with a filter button如何使用过滤器按钮构建重叠搜索栏
【发布时间】：2022-01-21 14:26:10
【问题描述】：

Desired Ui 我正在尝试制作一个带有右侧按钮的搜索栏，其中两者都与横幅重叠。在这两者之上是一个标题（我遇到的一个问题是页面缩小时覆盖搜索栏的标题）。我已经做到了，但它远非移动响应。我正在努力解决的最重要的事情是当页面缩小时按钮转到下一行。该按钮需要保持方形，那么我如何使搜索栏成为唯一缩小的东西？有没有人知道如何使它在所有尺寸上看起来都很好？

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

标签： html css user-interface bootstrap-4

【解决方案1】：

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.root {
  width: 100%;
  height: 100%;
}

.header {
  height: 50%;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border-bottom: solid 2px;
}

.search {
  z-index: 20;
  position: absolute;
  background: transparent;
  padding: 20px;
  width: 100%;
  text-align: center;
  height: 20px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.search_main {
  background: white;
  width: auto;
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  height: 100%;
  border: solid 2px;
}

.search_input {
  /*   border-radius: 20px; */
  border: solid 0px;
  outline: none;
  text-decoration: none;
  height: 100%;
  padding: 8px;
}

.btn {
  background: white;
  width: auto;
  /*   padding:10px; */
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /*   height:100%; */
  border: solid 2px;
  padding: 7px;
  margin-left: 20px;
}

.ionicon {
  /*   width: 35px;
  height: 35px; */
  font-size: 25px;
  font-weight: 40;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>title</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="root">
    <div class="header">
      Search from hundreds of recepies.
    </div>
    <div class="search">
      <div class="search_main"><input class='search_input' placeholder='Search...'></div>
      <div class="btn">
        <ion-icon name="filter-outline" class='ionicon'></ion-icon>
      </div>
    </div>
  </div>



  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>

</html>

【讨论】：