同樣在所有的浏覽器,下面的例子會顯示的圖像标記:
執行個體:
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:
- 設定清單類型為沒有清單項标記
- 設定填充和邊距 0px(浏覽器相容性)
ul 中所有 li:
- 設定圖像的 URL,并設定它隻顯示一次(無重複)
- 您需要的定位圖像位置(左 0px 和上下 5px)
- 用 padding-left 屬性把文本置于清單中
移除預設設定
ul {
list-style-type: none;
margin: 0;
padding: 0;
}