html - CSS按钮中的超链接不起作用并在任何地方领先
问题描述
每当我单击按钮时,它都不会指向超链接,单击后它只会上下移动。我尝试重新链接或使用其他链接来解决此问题,但无济于事。看来我的 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;"> </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;"> </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;"> </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>
解决方案
删除 CSS 代码中您编写的部分bottom: 4.5%
这样做的目的是将所有元素与您创建的那个类 (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;"> </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;"> </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;"> </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>
推荐阅读
- java - Rest API 测试 org.springframework.http.converter.HttpMessageNotReadableException
- qt - Qtcreator 在连接语句中不建议可用的信号和插槽
- forms - Symfony 4 表单发布到路由
- unit-testing - 为 Kotlin 对象编写单元测试时遇到问题
- javascript - 在 express 中将新的 select2 选项标签写入本地数据库
- http - 是否所有 cookie 都在 HTTP 请求中传递?
- apache-kafka - kafka 代理是否需要在消费者可以读取之前提交到磁盘
- cheerio - 使用汇总构建时运行时出现 Cheerio 错误,依赖项解析似乎是问题所在
- c# - 如何在 ASP.NET Core 3 预览版中使用 Lamar 2?
- python - numpy - 切片一个 3d 数组,如何在某个轴上应用两个不同长度的切片