为什么这些按钮之间会显示一条线？答案

【问题标题】：Why is a line displayed between these buttons?为什么这些按钮之间会显示一条线？
【发布时间】：2018-12-28 16:37:13
【问题描述】：

如何在按钮之间删除这条线？我第一次遇到这种情况。请在此处查看我的代码：

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

【问题讨论】：

修复损坏的 HTML - 不能将 button 放入 a 元素中，这是无效的。
Jezus.... of corse

标签： html css button hyperlink

【解决方案1】：

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

a {
  text-decoration: none;
}

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

【讨论】：

@Jos 你是对的，但是text-decoration 需要从a 中删除，而不是.cta-btn
你说的太对了，我的错！将对此进行编辑，但我认为解决方案是 CBroe 提到的解决方案。

【解决方案2】：

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

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

【讨论】：