我在导航栏中有某些菜单项。当在移动 View 中呈现时,它会转换为汉堡包,因此它具有响应性。汉堡包菜单中的元素未正确对齐。以下是代码引用
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background 0.2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: "";
display: block;
height: 100%;
position: absolute;
transition: all 0.2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
.menu-search {
display: flex;
flex-wrap: wrap;
float: right;
}
.search-box h5 {
color: red;
}
/* 48em = 768px */
@media (min-width: 52em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu-search .menu-box .menu {
clear: none;
text-align: left;
max-height: none;
}
.header .menu-icon {
display: none;
}
.menu {
float: left;
}
}
<header class="header">
<a href="" class="logo">Celebyte</a>
<div class="menu-search">
<span class="search-box">
<h5>Search Box</h5>
</span>
<span class="menu-box">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"
><span class="navicon"></span
></label>
<ul class="menu">
<li><a href="#work">Celebyte Gifting</a></li>
<li><a href="#about">Track Order</a></li>
<li><a href="#careers">All Categories</a></li>
<li><a href="#contact">Login</a></li>
</ul>
</span>
</div>
</header>
如上所示,我希望 SearchBox 和 MenuItems 在一行中,因此使用了 flex,但是,即使是汉堡包元素也具有上述属性。我的意图是将汉堡元素左对齐。那么最好的解决方案是什么?
Codesandbox 链接:https://codesandbox.io/s/vibrant-night-r7p4e
最佳答案
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background 0.2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: "";
display: block;
height: 100%;
position: absolute;
transition: all 0.2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
.menu-search {
display: flex;
flex-wrap: wrap;
width: calc(100% - 166.297px);
}
.search-box h5 {
color: red;
}
/* 48em = 768px */
@media (min-width: 52em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu-search .menu-box .menu {
clear: none;
text-align: left;
max-height: none;
}
.header .menu-icon {
display: none;
}
.menu {
float: left;
}
}
.search-box {
position: absolute;
right: 10px;
}
<header class="header">
<a href="" class="logo">Celebyte</a>
<div class="menu-search">
<span class="menu-box">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#work">Celebyte Gifting</a></li>
<li><a href="#about">Track Order</a></li>
<li><a href="#careers">All Categories</a></li>
<li><a href="#contact">Login</a></li>
</ul>
</span>
<span class="search-box">
<h5>Search Box</h5>
</span>
</div>
</header>
关于html - 如何对齐汉堡包菜单项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66652348/