Question

我在移动网站上创建菜单，并且我使用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>

Answer 1

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>

Answer 2

因为其中没有任何内容，无论是添加一个内容还是添加一些内容然后添加填充，请注意边框由于内部div而进入下一行，这些是不合适的嵌套，您应该考虑将它们更改为无序列表李的

.right-menu-btn-wrapper{border:1px solid red;}
.second-right-menu-btn-wrapper{border:1px solid green;}

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

Answer 3

你的css和html不是那么清楚。您不希望这么多代码行执行上述任务。我建议你解决问题的简单方法。

将此css样式添加到.css文件

.buttonNew{
width:100px;
height:50px;
padding:10px;
background-color:#fff;
color:blue;
}

并将此小代码行添加到.html文件

<div class="red-container">
<a href="#" class="buttonNew">Button</a>
</div>

我认为这是你希望的解决方案。

使用CSS，使菜单按钮可单击

3 个答案: