Question

我编写了如下代码：

<button class="btn post-btn">Read More &nbsp;
<a href="https://sway.office.com/iDYEqw?ref=Link"></a> 
<i class="fas fa-arrow-right"></i></button>

但是，当我单击按钮时，它会重定向到网站。但是按钮中的图像和文本越来越大。

我的修改代码：

<a href="https://sway.office.com/iDYEqw?ref=Link" class="btn post-btn">Read More &nbsp;</a> 
                            <i class="fas fa-arrow-right"></i></button>



enter code here

该如何纠正？谢谢。

Answer 1

这不是按钮的工作方式，您应该单独使用<a>标记或为按钮创建onclick事件来为您重定向，也可以包装按钮form内，然后将表单操作设置为所需的URL 。

您也可以将按钮包装在<a>中，这是完全不推荐的，因为根据W3C.org HTML docs，这不是标准方法。类似的question关于将<button>包裹在SO中的<a>中。

单独使用<a>标签。然后，您可以将其样式化为按钮，使其更具意义。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />

<a href="https://sway.office.com/iDYEqw?ref=Link">Read More &nbsp;<i class="fas fa-arrow-right"></i></a>

将<button>与onclick一起使用。然后，您可以通过更改window.location.href的值来重定向到所需的页面。

const button = document.querySelector("button");

button.addEventListener("click", function() {
  window.location.href = "https://sway.office.com/iDYEqw?ref=Link"
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />

<button class="btn post-btn">Read More &nbsp;
<i class="fas fa-arrow-right"></i></button>

将<button>包装在form内。然后将表单操作设置为所需的URL。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />

<form action="https://sway.office.com/iDYEqw?ref=Link" method="GET">
  <button>Read More &nbsp;<i class="fas fa-arrow-right"></i></button>
</form>

Answer 2

这是一个简单的修复程序。您只需将按钮放在a元素内，并添加一些CSS使其看起来正常。：

a {
color: black;
text-decoration: none;
}

<a href="https://sway.office.com/iDYEqw?ref=Link">
  <button class="btn post-btn">Read More &nbsp;
</a> 
<i class="fas fa-arrow-right"></i></button>

通过单击HTML中的按钮访问URL

2 个答案: