欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間：2013-01-02 14:50:58   作者：佚名   我要評論
由于每個地址的后面有個“修改地址”的功能,于是就用到了，position：absolute； right：10px；這樣把“修改地址”移到右邊去了，不過在此之前需要在li標簽添加position：relative才行
今天在寫一個購物車里面選擇發(fā)貨地址的部分時，多個收貨地址用到了UL標簽，由于每個地址的后面有個“修改地址”的功能，而且位于li標簽的右邊，于是就用到了，position：absolute； right：10px；這樣把“修改地址”移到右邊去了，不過在此之前需要在li標簽添加position：relative才行。html如下：

復制代碼
代碼如下:

<ul class="addr_list">
<li class="on"><span>寄送至</span><input type="radio" name="addr" />廣東省中山市三鄉(xiāng)鎮(zhèn)鴉崗村興隆製衣廠rabbit（rabbit收）13560351111<a href="#">修改地址</a></li>
<li><span>寄送至</span><input type="radio" name="addr" />廣東省中山市三鄉(xiāng)鎮(zhèn)鴉崗村興隆製衣廠rabbit（rabbit收）13560351111<a href="#">修改地址</a></li>
<li><span>寄送至</span><input type="radio" name="addr" />廣東省中山市三鄉(xiāng)鎮(zhèn)鴉崗村興隆製衣廠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;}

在chome，ff,sougou,360瀏覽器跟中的效果如下：

相關文章

  • 區(qū)別div和span、relative和absolute、display和visibility

    div和span、relative和absolute、display和visibility是很容易混淆和弄錯的HTML標簽與CSS屬性，今天52CSS.com簡單的羅列出它們的區(qū)別與使用要點，供大家參考。
    2009-12-17

  • HTML相對路徑(Relative Path)和絕對路徑(Absolute Path)深入理解

    web應用程序功能強大就在于它的超鏈接（Hyper Link），比如在a頁面保存指向b頁面的鏈接地址（也就是URI），但問題就恰恰出在了這里，如何正確引用一個文件。比如，怎樣在一
    2012-12-21

  • CSS position屬性absolute relative等五個值的解釋

    目前幾乎所有主流的瀏覽器都支持position屬性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE瀏覽器，IE9、IE10還沒測試過），以下是w3school對position五個值的
    2012-12-15

  • css中position屬性(absolute|relative|static|fixed)概述及應用

    position屬性的相關定義：static：無特殊定位，對象遵循正常文檔流;relative：對象遵循正常文檔流;absolute：對象脫離正常文檔流fixed：對象脫離正常文檔流，有興趣的朋友
    2013-04-08

  • css中定位中的absolute和relative是什么意思

    做一些浮動層等特殊特殊效果時要考慮到定位問題就要用到Position屬性，其有四個屬性值：static、fixed、absolute和relative，想必后面兩個大家都熟悉吧
    2014-04-15

  • css中position屬性使用詳解

    positon有4個屬性:static relative absolute fixed，我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什么意思呢？絕對是什么地方的絕對，相對又
    2014-11-28

最新評論