li標簽的position:absolute與relative案例應用

2024-07-11 08:29:10

字體：大中小

來源：轉載

供稿：網友

今天在寫一個購物車里面選擇發貨地址的部分時，多個收貨地址用到了UL標簽，由于每個地址的后面有個“修改地址”的功能，而且位于li標簽的右邊，于是就用到了，position：absolute； right：10px；這樣把“修改地址”移到右邊去了，不過在此之前需要在li標簽添加position：relative才行。html如下：

復制代碼

代碼如下:
<ul class="addr_list">
<li class="on"><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>
<li><span>寄送至</span><input type="radio" name="addr" />廣東省中山市三鄉鎮鴉崗村興隆製衣廠rabbit（rabbit收）13560351111<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;}

上一篇：CSS display:block在Firefox下顯示布局錯亂問題

下一篇：css float浮動屬性的深入研究及詳解拓展(二)

發表評論

共有條評論