我正在尝试添加链接内的按钮，不知道如何才能做到这一点。我给按钮Z-index:99，但它不起作用。它需要链接，但当你点击按钮链接不工作，但按钮功能必须工作。
HTML
<ul>
<a href="https://www.google.com/">
<li>
<h1>Test</h1>
<div class="buttons">
<button>X</button>
</div>
</li>
</a>
</ul>
CSS
ul{
a{
text-decoration: none;
}
li{
position: relative;
list-style-type: none;
display: flex;
justify-content: center;
border: 1px solid #000;
width: 200px;
}
.buttons{
cursor: pointer;
position: absolute;
right: 0;
}
}
代码Pen中的示例:https://codepen.io/orest97/pen/xwjzyzg
这就是您应该如何构造HTML以实现所需的结果:
null
ul{
list-style-type: none;
padding: 0;
margin: 0;
}
li {
position: relative;
display: inline-block;
}
a {
text-decoration: none;
padding: 25px 80px;
background: gray;
display: block;
}
button{
position: absolute;
top: 0;
right: 0;
}<ul>
<li>
<a href="https://www.google.com/">Test</a>
<button>X</button>
</li>
</ul>
https://codepen.io/flashbey/pen/kkgqebn
您的HTML；
<ul>
<li>
<a href="https://www.google.com/"></a>
<h1>Test</h1>
<div class="buttons">
<button>X</button>
</div>
</li>
</ul>
您的SCSS；
ul {
a {
text-decoration: none;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
li{
position: relative;
list-style-type: none;
display: flex;
justify-content: center;
border: 1px solid #000;
width: 200px;
}
.buttons {
cursor: pointer;
position: absolute;
right: 0;
}
}
