天天看點

CSS清單項标記浏覽器相容性解決方案

同樣在所有的浏覽器,下面的例子會顯示的圖像标記:

執行個體:

ul
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul li
{
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 14px; 
}      

例子解釋:

ul:

  1. 設定清單類型為沒有清單項标記
  2. 設定填充和邊距 0px(浏覽器相容性)

ul 中所有 li:

  1. 設定圖像的 URL,并設定它隻顯示一次(無重複)
  2. 您需要的定位圖像位置(左 0px 和上下 5px)
  3. 用 padding-left 屬性把文本置于清單中

移除預設設定

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}