CSS 按钮中的超链接无法正常工作并且无法引导到任何地方

Question

每当我单击按钮时，它都不会指向超链接，它只会在我单击后上下移动。我尝试重新链接或使用其他链接来解决此问题，但无济于事。我的 html 代码似乎是正确的，但我可能遗漏了代码中的一个小错误。

这是我的代码：

.btn {
    background-color:transparent;
    border-radius:28px;
    border:1px solid #702F8A;
    display:inline-block;
    cursor:pointer;
    color:#702F8A;
    font-family:Tahoma;
    font-size:14px;
padding:4px 13px;
    text-decoration:none;
position: absolute;
bottom: 4.5%

}
.btn:hover {
    background-color:#702F8A;
border-color:#702F8A;
}
.btn:active {
    position:relative;
    top:1px;
}
.flex-container {
    display: flex;
    justify-content: center;
}

<section class="px-4 cards_invitations">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4 py-3 text-center border"><a href="https://www.example.com/"><img class="img-fluid" font-family:lucida="" sans="" src="/images/contentimages/images/Accessories_Collage - Copy 2.png" /></a>
<p class="my-3" style="font-size:18px;">&nbsp;</p>

<div class="flex-container"><a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="https://www.example.com/">Accessories <i class="far fa-chevron-right pl-1"></i></a></div>
</div>

<div class="col-12 col-md-6 col-lg-4 py-3 text-center border"><a href="https://www.example.com/"><img class="img-fluid" src="/images/contentimages/images/Activewear - Copy 1.png" /></a>

<p class="my-3" style="font-size:18px;">&nbsp;</p>

<div class="flex-container"><a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="https://www.example.com/">Active Wear <i class="far fa-chevron-right pl-1"></i></a></div>
</div>

<div class="col-12 col-md-6 col-lg-4 py-3 text-center border"><a href="https://www.example.com/"><img class="img-fluid" font-family:lucida="" sans="" src="/images/contentimages/images/Bags_Backpacks_ - Copy 1.png" /></a>

<p class="my-3" style="font-size:18px;">&nbsp;</p>

<div class="flex-container"><a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="https://www.example.com/">Bags <i class="far fa-chevron-right pl-1"></i></a></div>
</div>

Answer 1

删除 CSS 代码中写 bottom: 4.5%

的部分

它所做的是将所有元素与您制作的 class (btn) 放在一起，并将它们全部放在彼此之上。发生这种情况时，浏览器不知道将用户重定向到哪里，这就是为什么它会像您所说的那样出现一些故障。当您删除它时，所有链接都应该再次工作。

此外，这并不能真正解决您遇到的问题，但最后，您缺少 2 个结束 div 标签和 1 个结束部分标签。

完整正确代码：

<style type="text/css">
   .btn {
   background-color:transparent;
   border-radius:28px;
   border:1px solid #702F8A;
   display:inline-block;
   cursor:pointer;
   color:#702F8A;
   font-family:Tahoma;
   font-size:14px;
   padding:4px 13px;
   text-decoration:none;
   position: absolute;
   }
   .btn:hover {
   background-color:#702F8A;
   border-color:#702F8A;
   }
   .btn:active {
   position:relative;
   top:1px;
   }
   .flex-container {
   display: flex;
   justify-content: center;
   }
</style>
<section class="px-4 cards_invitations">
   <div class="container">
      <div class="row">
         <div class="col-12 col-md-6 col-lg-4 py-3 text-center border">
            <a href="https://www.example.com/"><img class="img-fluid" font-family:lucida="" sans="" src="/images/contentimages/images/Accessories_Collage - Copy 2.png" /></a>
            <p class="my-3" style="font-size:18px;">&nbsp;</p>
            <div class="flex-container"><a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="https://www.example.com/">Accessories <i class="far fa-chevron-right pl-1"></i></a></div>
         </div>
         <div class="col-12 col-md-6 col-lg-4 py-3 text-center border">
            <a href="https://www.example.com/"><img class="img-fluid" src="/images/contentimages/images/Activewear - Copy 1.png" /></a>
            <p class="my-3" style="font-size:18px;">&nbsp;</p>
            <div class="flex-container"><a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="https://www.example.com/">Active Wear <i class="far fa-chevron-right pl-1"></i></a></div>
         </div>
         <div class="col-12 col-md-6 col-lg-4 py-3 text-center border">
            <a href="https://www.example.com/"><img class="img-fluid" font-family:lucida="" sans="" src="/images/contentimages/images/Bags_Backpacks_ - Copy 1.png" /></a>
            <p class="my-3" style="font-size:18px;">&nbsp;</p>
            <div class="flex-container"><a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="https://www.example.com/">Bags <i class="far fa-chevron-right pl-1"></i></a></div>
         </div>
      </div>
   </div>
</section>

CSS 按钮中的超链接无法正常工作并且无法引导到任何地方

Hyperlink in CSS button not working and leading anywhere

html

css

button

hyperlink

href