Html - a标签如何包裹Div

Posted 贝尔塔猫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Html - a标签如何包裹Div相关的知识,希望对你有一定的参考价值。

a标签如何包裹Div?

其实应该将思路转变为将a标签作为一个遮罩来覆盖div。

做法是将a标签放置在该div下,通过将div进行相对定位【position:relative】

将a标签进行绝对定位【position:absolute】 + 层级提升【z-index:199930710】 + 高度宽度和div同步【height:100%;width:100%】

示例代码:

HTML:

<div class="mui-col-xs-10" id="go_set">    
    <a href="#set" class="go_ahref">
        <div class="media">
            <div class="media-left">
                <a href="#"><img src="../Images/tab1-1.png" width="60px" alt="" /></a>
            </div>
            <div class="media-body text-left">
                    <h4 class="media-heading">商户收包裹</h4>
                    <p class="media-middle">商户收包裹商户收包裹商户收包裹商户收包裹</p>
            </div> 
        </div>     
    </a>
</div>    

CSS:

.go_ahref{position: absolute;z-index: 19930710;width: 100%;height: 100%;}
.mui-col-xs-10{position:relative}

 

以上是关于Html - a标签如何包裹Div的主要内容,如果未能解决你的问题,请参考以下文章

如何将html样式标签提取到css中

HTML开发基础

HTML——b i del a p img h1 h2 h3 h4 h5 h6 hr ol ul 标签的使用方法详解

Node Js & Puppeteer - 如何选择包裹在 Anchor 标签内的文本

HTML

点击span标签中的文字如何触发一个链接,若用jquery的方法来用的话,又该如何做?