时间戳

首页 > 解决方案 > 为什么这些按钮之间会显示一条线？

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

问题描述

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

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

标签： htmlcssbuttonhyperlink

解决方案

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

a {
  text-decoration: none;
}

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

推荐阅读