CSS&HTML：上下排列按钮间文本误成超链接的解决方法

我尝试创建两个带有不同链接的按钮，其中第二个按钮为可点击图片形式，但按钮之间的文本莫名变成了超链接，请问该如何解决？

原代码 #

CSS代码

.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;
}

HTML代码

<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>标签：浏览器会自动尝试修复不完整的HTML结构，导致后续的文本和元素被错误包裹进未闭合的超链接中。
• 给每个<a>标签补充闭合标签</a>，放在对应<button>元素的后方。
• 额外注意：<a>标签不支持method属性（该属性属于<form>标签），可以直接删除这个无效属性。

修正后的HTML代码 #

<body style="font-family: arial">
  <p>Click the button below For youtube</p>
  <div>
    <a href="https://www.youtube.com/" target="_blank">
      <button class="button button1">Youtube</button>
    </a> <!-- 补充a标签闭合 -->
  </div>
  <div>
    <p>Click the button below fork Reddit</p>
    <a href="https://www.reddit.com/" 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> <!-- 补充a标签闭合 -->
  </div>
</body>

内容的提问来源于stack exchange，提问作者dontknowwhatimdoing