html - 为什么这些按钮之间显示一条线？

Question

如何删除按钮之间的这一行？我第一次遇到这种情况。请在这里查看我的代码:

    <a href="#info-section">
      <button class="cta-btn rg">WATCH</button>
    </a>  
    <a href="#info-section">
      <button class="cta-btn lf">LEARN MORE</button>
    </a>

我的 CSS 响应按钮:

.cta-btn{
  padding: 15px;
  border-radius: 30px;
  width: 150px;
  font-size: .8em;
  color: #fff;
  background-color: inherit;
  border: 1px solid #fff;
  margin-top: 20px;
  &:hover{
    cursor: pointer;
  }
}
.rg {
  margin-right: 10px;
}
.lf{
  margin-left: 10px;
}

Answer 1

我认为那条线是 A 标签的下划线。尝试添加 text-decoration: none;给你的<a> .像这样:

a {
  text-decoration: none;
}

您也可能忘记在这部分代码之前关闭 A 标签。所以检查是否每个 <a>有一个关闭 </a>