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 属性把文本置于列表中

移除默认设置

list-style-type:none 属性可以用于移除小标记。默认情况下列表 <ul><ol>还设置了内边距和外边距,可使用 margin:0 和 padding:0 来移除:

实例:

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

猜你喜欢

转载自blog.csdn.net/Serena_tz/article/details/114027878