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

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标签的下划线。 尝试添加文本装饰：无；到您的<a>。像这样：

a {
  text-decoration: none;
}

也有可能您忘记在代码的这一部分之前关闭了A标签。因此，检查每个<a>是否都有结束</a>

Answer 2

我认为这与<a>周围包含<button>标签的方式有关，但是将其更改为<a href="#info-section"><button class="cta-btn rg">WATCH</button></a>会删除下划线。几乎就像正在格式化的空格字符一样。

注意，这不是正确的方法，但是会删除下划线。