li标签的position:absolute与relative案例应用

今天在写一个 购物 车里面选择发货地址的部分时，多个收货地址用到了UL标签，由于每个地址的后面有个[修改地址]的功能，而且位于li标签的 右边 ，于是就用到了，pos IT ion：absolute； right：10px；这样把[修改地址]移到右边去了， 不过 在此之前需要在li标签添加position：relative才行。ht ML 如下：

复制代码

代码如下:

<ul class="addr_list">
<li class="on"><span>寄送至</span><input ty PE ="radio" n am e="addr" />廣東省中山市三鄉鎮鴉崗村興隆製衣廠rabbit（rabbit收）13560351111<a hr ef=" # ">修改地址</a></li>
<li><span>寄送至</span><input type="radio" name="addr" />廣東省中山市三鄉鎮鴉崗村興隆製衣廠rabbit（rabbit收）13560351111<a href="#">修改地址</a></li>
<li><span>寄送至</span><input type="radio" name="addr" />廣東省中山市三鄉鎮鴉崗村興隆製衣廠rabbit（rabbit收）13560351111<a href="#">修改地址</a></li>
/ul>

css code :

复制代码

代码如下:

ul.addr_list{m arg in:20px 0;}
ul.addr_list li{border:1px solid #fff; padding-left:30px; mar gin :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浏览器 中的效果不甚如意，如下图：

&nbs p;
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 浏览器跟中的效果如下：

总结

以上是 为你收集整理的 li标签的position:absolute与relative案例应用 全部内容，希望文章能够帮你解决 li标签的position:absolute与relative案例应用 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于li标签的position:absolute与relative案例应用的详细内容...