li标签的position:absolute与relative案例应用
复制代码代码如下:
ul class="addr_list">
li class="on"> span> 寄送至/span> input tyPE="radio" name="addr" /> 廣東省中山市三鄉鎮鴉崗村興隆製衣廠rabbit（rabbit收）13560351111a href="#"> 修改地址/a> /li>
li> span> 寄送至/span> input type="radio" name="addr" /> 廣東省中山市三鄉鎮鴉崗村興隆製衣廠rabbit（rabbit收）13560351111a href="#"> 修改地址/a> /li>
li> span> 寄送至/span> input type="radio" name="addr" /> 廣東省中山市三鄉鎮鴉崗村興隆製衣廠rabbit（rabbit收）13560351111a href="#"> 修改地址/a> /li>
/ul>
css code:
复制代码代码如下:
ul.addr_list{ margin:20px 0; }
ul.addr_list li{ border:1px solid #fff; padding-left:30px; margin:2px 0; position:relative; }
ul.addr_list li:hover,ul.addr_list li.on{ border:1px solid #B18A69; background:#E7D8C7 url(../images/deal/addr_icon.jpg) no-repeat 10px 3px; }
ul.addr_list li span,ul.addr_list li a{ color:#fff; }
ul.addr_list li a{ position:absolute; right:10px; top:0; }
ul.addr_list li:hover span,ul.addr_list li:hover a,ul.addr_list li.on span,ul.addr_list li.on a{ color:#966233; }
在chome，ff中的效果如下：
但是在sougou跟360浏览器中的效果不甚如意，如下图：
li的上边框不见了，百度查了下，没找到有遇到同种问题的情况，不过有类似的情况，在li中加上个zoom：1这个问题就解决了，其实具体为什么要这样我也不是很清楚，我的理解是加了之后提高了li的层级。修改后的css code：
复制代码代码如下:
ul.addr_list{
margin:20px 0;
}
ul.addr_list li{
border:1px solid #fff;
padding-left:30px;
margin:2px 0;
position:relative;
zoom:1;
}
ul.addr_list li:hover,ul.addr_list li.on{
border:1px solid #B18A69;
background:#E7D8C7 url(../images/deal/addr_icon.jpg) no-repeat 10px 3px;
}
ul.addr_list li span,ul.addr_list li a{
color:#fff;
}
ul.addr_list li a{
position:absolute;
right:10px;
top:0;
}
ul.addr_list li:hover span,ul.addr_list li:hover a,ul.addr_list li.on span,ul.addr_list li.on a{
color:#966233;
}
在chome，ff,sougou,360浏览器跟中的效果如下：
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： li标签的position:absolute与relative案例应用
本文地址： https://pptw.com/jishu/584816.html