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:;width: 100%;height: 100%;}
.mui-col-xs-10{position:relative}
Html - a标签如何包裹Div的更多相关文章
- 解决embed标签显示在div上层【转藏】
解决embed标签显示在div上层,非设置z-index 今天给屌炸了爆笑网增加了视频栏目,但是发现在IE8中,顶部浮动导航的div在移动到embed视频上时,总是被embed的flash文件盖住.分 ...
- 为什么p标签不能嵌套div??
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- a标签包裹div的问题
示例代码 1 <a href="#"> 2 <div> 3 <a href="#"></a> 4 </di ...
- html之块级标签h系列,div
两个名词含义: 块级标签:内容再少也会占满整行 内联标签:有多少内容点多少地方 注:块级标签和内联不签不是绝对的,可以通过CSS作任意转换 1.h1-h6 :块级标签 请仅仅把标题标签用作标题文本,如 ...
- HTML里为什么不能在<p>标签中嵌套<div>标签
学习过HTML语言的人都应该知道,在HTML里,有分块级元素和内联元素:例如我们常用到的div,o,ul,dl,table,h1...h6等,这些都是块级元素:而像a,b,i,em,img,span等 ...
- 关于p标签不能嵌套div标签引发的标签嵌套问题总结
问题由来:<p>中嵌套<div>标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段<p>的效果,所以就在网上找了许多关于标签嵌套规则的资料 ...
- Html-Css-div标签嵌套浮动div标签时无法撑开外部div的解决
当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的 当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的,也就是说DIV2在这里相当于浮在 ...
- IE中iframe标签显示在DIV之上的问题解决方案
在做网页时前端时,使用IE打开时会出现标题栏DIV被遮挡PDF遮挡, 后在stackoverflow中查到是IE浏览器的问题:链接https://stackoverflow.com/questions ...
- iframe标签书写导致div不显示
<iframe id="iframbox" src="" frameborder="0" scrolling="auto&q ...
随机推荐
- Windows远程桌面连接如何直接使用剪贴板功能
连接到Windows Server服务器时,通常使用远程桌面连接,那么如果有些时候按照习惯复制本地文件到远程服务器发现无法粘贴怎么办,这个时候稍微设置一下就OK了, 首先重新运行远程桌面连接,在登陆界 ...
- Java for LeetCode 031 Next Permutation
Next Permutation Total Accepted: 33595 Total Submissions: 134095 Implement next permutation, whi ...
- BestCoder12 1001.So easy(hdu 5058) 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5058 (格式有点问题,为了方便阅读---整个复制下来吧) 题目意思:给出两个长度都为 n 的集合你,问 ...
- 多个list合并
需要多个list合并,如图 @SuppressWarnings("unchecked") @Override public List<CwInfo> get ...
- 【python-mysql】在ubuntu下安装python-mysql环境
1.先安装mysql sudo apt-get install mysql-server apt-get isntall mysql-client sudo apt-get install libmy ...
- 【VirtualBox】端口转发,ssh
端口转发 VirualBox的设置 - 网络 - 端口转发 里面有主机IP.主机端口.子系统IP.子系统端口 设置后的含义是:当外部访问主机IP:主机端口后,将会把访问映射到虚拟机的子系统IP和子系统 ...
- HDU1267 递推
下沙的沙子有几粒? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total S ...
- osg事件处理器osgGA::GUIEventHandler handle
bool handle(const osgGA::GUIEventAdapter& ea, osgGA::GUIActionAdapter& aa) { osgViewer::View ...
- linux网络编程_1
本文属于转载,稍有改动,以利于学习. (一)Linux网络编程--网络知识介绍 Linux网络编程--网络知识介绍客户端和服务端 网络程序和普通的程序有一个最大的区别是网络程序是由两个 ...
- PHP数组的使用方法小结
数组就是一组数据的集合,把一系列数据组织起来,形成一个可操作的整体.数组的每个实体都包含两项:键和值. 一.什么是数组数组就是一组数据的集合,把一系列数据组织起来,形成一个可操作的整体.数组的每个实体 ...