li标识的position:absolute与relative实例运用

2021-03-10 19:18 jianzhan
今日在写1个买东西车里边挑选发货详细地址的一部分时,好几个收货详细地址用到了UL标识,因为每一个详细地址的后边有个“改动详细地址”的作用,并且坐落于li标识的右侧,因而就用到了,position:absolute; right:10px;这样把“改动详细地址”移到右侧去了,但是在此以前必须在li标识加上position:relative才行。html以下:

拷贝编码
编码以下:

<ul class="addr_list">
<li class="on"><span>寄送至</span><input type="radio" name="addr" />廣東省中山市市3鄉鎮鴉崗村興隆製衣廠rabbit(rabbit收)<a href="#">改动详细地址</a></li>
<li><span>寄送至</span><input type="radio" name="addr" />廣東省中山市市3鄉鎮鴉崗村興隆製衣廠rabbit(rabbit收)<a href="#">改动详细地址</a></li>
<li><span>寄送至</span><input type="radio" name="addr" />廣東省中山市市3鄉鎮鴉崗村興隆製衣廠rabbit(rabbit收)<a 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访问器跟中的实际效果以下: