我试图创建2个按钮与不同的链接，并有第二个按钮是一个可点击的图像。由于某些原因，按钮之间的文本充当超链接。我该如何解决这个问题?
.button1 {
background-color: #E44040;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {
border: none;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {
border-radius: 2px;
}
.button2 {
border-radius: 12px;
}<body style="font-family: arial">
<p>Click the button below For youtube</p>
<div>
<a href="https://www.youtube.com/" method="get" target="_blank">
<button class="button button1">Youtube</button>
</div>
<div>
<p>Click the button below fork Reddit</p>
<a href="https://www.reddit.com/" method="get" target="_blank">
<button class="button button2" style="border: 0; background: transparent">
<img src="https://toppng.com/uploads/preview/reddit-icon-reddit-logo-transparent-115628752708pqmsy4kgm.png" width="90" height="90"></button>
</div>
您忘记关闭a标记了。试试这个:
编辑:将按钮更改为div，参见克隆用户的评论
body {
font-family: arial, sans-serif;
}
.button1 {
background-color: #E44040;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {
border: none;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 12px;}<p>Click the button below For youtube</p>
<div>
<a href="https://www.youtube.com/" method="get" target="_blank">
<div class="button button1">Youtube</div>
</a>
</div>
<div>
<p>Click the button below fork Reddit</p>
<a href="https://www.reddit.com/" method="get" target="_blank">
<div class="button button2" style="border: 0; background: transparent">
<img src="https://toppng.com/uploads/preview/reddit-icon-reddit-logo-transparent-115628752708pqmsy4kgm.png" width="90" height="90">
</div>
</a>
</div>您没有关闭<a>标记。
这是正确的代码:
.button1 {
background-color: #E44040;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {
border: none;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 12px;}<body style="font-family: arial">
<p>Click the button below For youtube</p>
<div>
<a href="https://www.youtube.com/" method="get" target="_blank">
<button class="button button1">Youtube</button>
</a>
</div>
<div>
<p>Click the button below fork Reddit</p>
<a href="https://www.reddit.com/" method="get" target="_blank">
<button class="button button2" style="border: 0; background: transparent">
<img src="https://toppng.com/uploads/preview/reddit-icon-reddit-logo-transparent-115628752708pqmsy4kgm.png" width="90" height="90">
</button>
</a>
</div>
</body>