Question

Currently, I have a box which has some text inside it. Currently, the link is only applied to some text as below:

<div class="row text-banner-blocks">
<div class="col-sm-4 header-text-banner text-center">
 <!-- gray-border -->
  <div class="box">
     <h3>Free delivery worldwide*</h3>
     <a href="#">
     *More info here
     </a>
  </div>
</div>

This is how it appears on the site:

https://snag.gy/sbC421.jpg

时，样式丢失了

但是，我希望将整个链接放在整个框中，就像HTML一样，我只是将标记放在标记内，但我似乎失去了所有的样式，我认为填充是什么？代码：

<div class="row text-banner-blocks">
<div class="col-sm-4 header-text-banner text-center">
<!-- gray-border -->
<a href="#">
  <div class="box">
     <h3>Free delivery worldwide*</h3>
     <br/>
     *More info here
  </div>
</a>
</div>

这就是它的照顾方式：

https://snag.gy/KZzSUv.jpg

非常感谢任何帮助！

Answer 1

我认为您使用需要父元素为div的css选择器引用.box div 所以你可能需要将box元素的css更改为

a > .box {
   /* styles */
}

check this image for more info

Answer 2

决定使用JavaScript在里面使用下面的div标签参数：

onclick="document.location='#'"

这个解决方案更适合我所追求的，因为我使用的是几张样式表，很难发现罪魁祸首。

将<div>放入<a> tag

2 个答案: