css - CSS - 固定按钮展开
问题描述
我正在尝试使搜索栏在设备尺寸 < 768px 上展开。GIF 图像。单击展开时如何固定按钮?
@media (max-width: 768px) {
.header-search {
margin-left: 1em;
.search-bar {
max-width: 3em;
margin-left: auto;
&:focus-within {
max-width: 100%;
.search-bar__input {
width: auto;
padding: 0 1em;
}
}
}
.search-bar__input {
width: 0;
padding: 0;
}
}
}
这是我的密码笔: https ://codepen.io/phamtien990819/pen/PoqGwEv
解决方案
我更新了这个 CSS 代码。我曾经position: absolute;
将按钮放在栏的右侧。因此,即使在输入打开后,按钮也会保持在右侧而不移动。
@media (max-width: 768px) {
.header-search {
margin-left: 1em;
position: relative;
.search-bar__input {
margin-left: 10px;
background: transparent;
overflow: hidden;
}
.search-bar__btn {
width: 40px;
position: absolute;
right: 1px;
height: 29px;
}
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
font-size: 14px;
}
ol,
ul {
padding: 0;
margin: 0;
list-style: none;
}
main {
flex: 1;
}
.material-icons {
font-size: 24px;
vertical-align: middle;
}
.material-icons::before {
content: attr(icon);
}
.site-header {
position: sticky;
top: -40px;
width: 100%;
z-index: 99;
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.top-nav {
background: rgba(0, 0, 0, 0.03);
}
.top-nav .container {
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
}
.top-nav ul {
display: flex;
font-size: 12px;
list-style: none;
}
.top-nav ul>li+li {
margin-left: 1.5em;
}
.top-nav ul a {
color: currentColor;
}
.main-nav .container {
display: flex;
justify-content: space-between;
align-items: center;
height: 5em;
}
.header-brand {
display: flex;
align-items: center;
justify-content: space-between;
}
.header-brand .logo {
text-decoration: none;
color: currentColor;
}
.header-brand .menu-toggle {
display: none;
border: 0;
outline: 0;
background: transparent;
margin-left: 1em;
padding: 6px;
}
/* BEGIN SEARCH BAR */
.header-search {
flex: auto;
margin-left: 4em;
}
.header-search .search-bar {
display: flex;
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.1);
max-width: 25em;
height: 2.5em;
transition: all 3s;
}
.header-search .search-bar__input {
flex: auto;
height: 100%;
border: 0;
padding: 0 1em;
outline: 0;
}
.header-search .search-bar__btn {
width: 3em;
height: 100%;
border: 0;
outline: 0;
text-align: center;
}
@media (max-width: 768px) {
.header-search {
margin-left: 1em;
position: relative;
}
.header-search .search-bar__input {
margin-left: 10px;
background: transparent;
overflow: hidden;
}
.header-search .search-bar__btn {
width: 40px;
position: absolute;
right: 1px;
height: 29px;
}
.header-search .search-bar {
max-width: 3em;
margin-left: auto;
}
.header-search .search-bar:focus-within {
max-width: 100%;
}
.header-search .search-bar:focus-within .search-bar__input {
width: auto;
}
.header-search .search-bar__input {
width: 0;
padding: 0;
}
}
/* END SEARCH BAR */
.header-user {
display: flex;
align-items: center;
}
.header-user .item {
position: relative;
flex-shrink: 0;
display: inline-flex;
}
.header-user .item .user-link {
font-weight: 500;
color: currentColor;
padding: 6px;
border-radius: 4px;
margin-left: 8px;
}
.header-user .item .user-link:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.03);
}
@media (max-width: 768px) {
.s-header {
top: 0;
}
.top-nav {
display: none;
}
.main-nav .container {
height: 4em;
}
.header-brand .menu-toggle {
display: inline-block;
margin-left: 0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<body>
<header class="site-header">
<div class="top-nav">
<div class="container">
<ul>
<li><a href="#">Top menu item</a></li>
<li><a href="#">Top menu item</a></li>
<li><a href="#">Top menu item</a></li>
<li><a href="#">Top menu item</a></li>
<li><a href="#">Top menu item</a></li>
</ul>
</div>
</div>
<nav class="main-nav">
<div class="container">
<div class="header-brand">
<a class="logo d-none d-md-inline-block" href="#">LOGO HERE</a>
<button class="menu-toggle">
<i class="material-icons" icon="menu"></i>
</button>
</div>
<div class="header-search">
<form action="#" class="search-bar">
<input class="search-bar__input" type="search" placeholder="Search..." />
<button class="search-bar__btn" type="button">
<i class="material-icons" icon="search"></i>
</button>
</form>
</div>
<ul class="header-user">
<li class="item">
<a class="user-link" href="#">
<i class="material-icons" icon="person_add"></i>
<span class="d-none d-md-inline">Login / Register</span>
</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="container" style="height: 1000px">
<p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</main>
<footer>
<div class="container">
<p>Footer content</p>
</div>
</footer>
</body>
推荐阅读
- button - html.Button 在 Google colaboratory 中不适用于 JupyterDash
- ruby-on-rails - 如何在 Rails 6 中一次运行所有测试,包括系统测试?
- python - python3.9无法打印收据,windows10平台的escposprinter库
- javascript - VS Code 调试控制台如何访问闭包函数?
- amazon-web-services - 如何将 Aurora DB 实例复制到另一个现有实例
- bash - 如何获取字符串的唯一计数
- javascript - Leaflet JS - 在矩形中绘制矩形并过滤圆形标记,并仅使用这些标记更新 HTML 表格
- javascript - 如何让 jQuery 在点击时向下滚动。我的不起作用
- node.js - 具有动态 HTML 后端和 javascript 前端的应用程序的项目树
- rundeck - 在特定步骤中停止 rundeck 工作流程