css列表制作

css列表制作方法

无序列表样式调整 通过list-style-type属性可以修改无序列表的标记样式。常用值包括disc（实心圆点）、circle（空心圆）、square（方块）。示例代码：

ul {
  list-style-type: square;
}

有序列表样式调整 使用list-style-type可定义有序列表编号样式。支持值如decimal（数字）、lower-roman（小写罗马数字）、upper-alpha（大写字母）。示例：

ol {
  list-style-type: upper-alpha;
}

自定义列表标记图片 list-style-image属性允许使用图片作为列表标记。需指定图片路径：

ul {
  list-style-image: url('marker.png');
}

控制标记位置 list-style-position决定标记位于列表项内容内部或外部。inside值使标记与文本对齐，outside为默认值：

li {
  list-style-position: inside;
}

复合属性简写 list-style可合并多个属性。格式为type position image：

ul {
  list-style: square inside url('marker.png');
}

水平排列列表项 通过display: inline-block或float实现列表项横向排列：

li {
  display: inline-block;
  margin-right: 15px;
}

清除默认样式 重置浏览器默认列表样式可使用：

ul, ol {
  list-style: none;
  padding-left: 0;
}