技術標籤：定位列表htmlcsshtml5

精靈圖片絕對定位的三種方式（偽）

有強迫症的我為此困擾了一上午，說白了還是自己實力不夠，想法總被侷限。

實現結果如上圖中間的為最終滿意樣品
整體用列表寫的`
左1：
把整體看成一個背景圖加上面文字；
缺陷：由於圖片樣式隨著背景大小改變導致圖示大小超過預期設定20*20

                    <li>
                        <a href="" style="width: 20px;height:25px;
                        background-position:-10px -12px ;
                           padding-left: 25px;
                    background-image: url(imgs/layout_css_sprites.png)">VIP會員</a>
                    </li>

 

左2：
單獨列出一個li使其上下標準，完美答法

      <li><a href=""
              style="width: 20px;height:20px;
              display:inline-block;
              margin-right: -22px;
              background: url(imgs/layout_css_sprites.png) no-repeat -10px -8px">
             </a>
     </li>
      <li><a href="" style="color: red">VIP會員</a></li>


 

左3：
單獨寫出一個a超連結，但與上面的a並列顯示，沒有達到預期。

    <li style="margin-top: 8px">
                        <a href=""
                           style="width: 20px;height:20px;
                           display:inline-block;
                           background: url(imgs/layout_css_sprites.png) no-repeat -10px -8px">
                        </a>
                        <a href="" style="">VIP會員</a>
    </li>