我不知道菜单按钮的单击区域。出于测试目的,我这次将颜色涂成绿色,因此问题立即显而易见。为什么背景与实际按钮如此扭曲?如何垂直居中?
您必须减少浏览器> 920px才能使用移动版本。
html {
font-size: calc(1.3em + 1vw)
}
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #fafafa;
}
/* header */
.header {
overflow: auto;
position: fixed;
width: 100%;
max-width: 30em;
margin-left: auto;
margin-right: auto;
box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
background: #ffb347; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffb347, #ffcc33); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffb347, #ffcc33); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header li a {
display: block;
padding: 20px 20px;
text-decoration: none;
font-size: 0.7em;
color: #000;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: blue;
}
.header .logo {
display: block;
float: left;
font-size: 1.3em;
line-height: 1.0em;
padding: 20px 20px;
text-decoration: none;
color: #000;
}
.header .logo:hover {
background-color: blue;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding-top: 1.2em;
padding-right: 1em;
position: relative;
user-select: none;
background: green;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 7px;
position: relative;
transition: background .2s ease-out;
width: 40px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 15px;
}
.header .menu-icon .navicon:after {
top: -15px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 100%;
}
.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;
}
@media (min-width: 920px) {
.header .logo {
font-size: 1.5em;
line-height: 1.3em;
}
.header {
position: relative;
}
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
line-height: 2.8em;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<div class="header">
<a href="" class="logo">LOREM <b>IPSUM</b></a>
<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">Lorem</a></li>
<li><a href="#about">Ipsum</a></li>
<li><a href="#careers">Dolor</a></li>
<li><a href="#contact">Set</a></li>
<li><a href="#contact">Amit</a></li>
</ul>
</div>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
发生了什么事:标题高度是根据“ LOREN IPSUM”的填充和垂直文本大小自动计算的。标签不知道该标签,您必须在背景之后(或代替背景)添加:绿色以下内容之一
height: calc(1em + 16px);
padding-bottom: calc(1.2em + 3.5px);
像素调整是不直观的,我会在em中将显式高度设置为header,并对标签执行相同的操作。
您可以在标签中添加它。
style =“ width:20px; height:43px”
这将放大可单击区域。
html {
font-size: calc(1.3em + 1vw)
}
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #fafafa;
}
/* header */
.header {
overflow: auto;
position: fixed;
width: 100%;
max-width: 30em;
margin-left: auto;
margin-right: auto;
box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
background: #ffb347; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffb347, #ffcc33); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffb347, #ffcc33); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header li a {
display: block;
padding: 20px 20px;
text-decoration: none;
font-size: 0.7em;
color: #000;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: blue;
}
.header .logo {
display: block;
float: left;
font-size: 1.3em;
line-height: 1.0em;
padding: 20px 20px;
text-decoration: none;
color: #000;
}
.header .logo:hover {
background-color: blue;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding-top: 1.2em;
padding-right: 1em;
position: relative;
user-select: none;
background: green;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 7px;
position: relative;
transition: background .2s ease-out;
width: 40px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 15px;
}
.header .menu-icon .navicon:after {
top: -15px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 100%;
}
.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;
}
@media (min-width: 920px) {
.header .logo {
font-size: 1.5em;
line-height: 1.3em;
}
.header {
position: relative;
}
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
line-height: 2.8em;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/1.2.2/bluebird.js"></script>
<title>JS Bin</title>
</head>
<body>
<div class="header">
<a href="" class="logo">LOREM <b>IPSUM</b></a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label style="width:20px;height:43px" class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#work">Lorem</a></li>
<li><a href="#about">Ipsum</a></li>
<li><a href="#careers">Dolor</a></li>
<li><a href="#contact">Set</a></li>
<li><a href="#contact">Amit</a></li>
</ul>
</div>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
</body>
</html>