如何使用过滤器按钮构建重叠搜索栏
Posted
技术标签:
【中文标题】如何使用过滤器按钮构建重叠搜索栏【英文标题】：How can I build a overlapping search bar with a filter button 【发布时间】：2022-01-21 14:26:10 【问题描述】：Desired Ui 我正在尝试制作一个带有右侧按钮的搜索栏，其中两者都与横幅重叠。在这两者之上是一个标题（我遇到的一个问题是页面缩小时覆盖搜索栏的标题）。 我已经做到了，但它远非移动响应。我正在努力解决的最重要的事情是当页面缩小时按钮转到下一行。该按钮需要保持方形，那么我如何使搜索栏成为唯一缩小的东西？有没有人知道如何使它在所有尺寸上看起来都很好？
【问题讨论】：
请提供足够的代码，以便其他人更好地理解或重现问题。 【参考方案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>【讨论】：
以上是关于如何使用过滤器按钮构建重叠搜索栏的主要内容，如果未能解决你的问题，请参考以下文章