gpt4 book ai didi

html - 使用 CSS,使菜单按钮可点击

转载 作者:太空宇宙 更新时间:2023-11-04 12:21:56 26 4
gpt4 key购买 nike

我正在移动网站上创建菜单,我正在使用 CSS 而不是使用图像制作菜单按钮。我似乎无法使整个菜单按钮可点击,只有菜单图标的第一条水平线是可点击的。我需要做的是使整个按钮,加上按钮周围的 10px 填充可点击。到目前为止,这是我得到的:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test website</title>
<style>
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body,html {
margin:0;
padding:0;
}
.red-container{
position:fixed;
right: 0;
top: 0;
left: 0;
width:100%;
background-color:#cc0000;
padding:0.5em 1em 0.5em 1em;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 1.8em;
font-weight:700;
}
.red-container:before {
content: 'Page';
display: inline-block;
vertical-align: middle;
}
.right-menu-btn-wrapper{
display: inline-block;
position: relative;
float:right;
padding: 0.1em;
vertical-align: middle;
background-color: #0000ee;
}

.white-menu-btn {
display: inline-block;
position: relative;
float: right;
vertical-align: middle;
padding-right: 0.5em;
cursor: pointer;
}
.white-menu-btn:before {
content: "";
position: absolute;
left: 0;
top: 0.25em;
width: 1em;
height: 0.15em;
background: white;
box-shadow:
0 0.25em 0 0 white,
0 0.5em 0 0 white;
}
</style>
</head>
<body>
<!-- Red Header -->
<div class="red-container">
<a href="#" class="right-menu-btn-wrapper">
<div class="white-menu-btn">
</div></a>
</div>
<!-- END Red Header -->
</body>
</html>

最佳答案

http://codepen.io/anon/pen/emGMVr

这可以通过将链接放在 div 中并为其指定宽度和高度来实现。

.white-menu-btn {
display: block;
position: relative;
float: right;
height: 30px;
width: 30px;
vertical-align: middle;
padding-right: 0.5em;
cursor: pointer;
}

<div class="white-menu-btn">
<a href="#" class="right-menu-btn-wrapper">
</a>
</div>

关于html - 使用 CSS,使菜单按钮可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28304403/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com