css怎么设置无序列表？css的列表样式总结
在网页开发中，无序列表是非常常用的内容展示元素，默认的无序列表样式往往比较单一，无法满足页面的设计需求。通过CSS可以灵活调整无序列表的外观，包括列表项标记的类型、位置、图片替换等。本文将系统总结CSS中设置无序列表的相关属性，结合代码示例帮助大家快速掌握用法。
一、无序列表的基础结构
首先我们需要明确HTML中无序列表的基础结构，无序列表使用 <ul> 标签作为容器，每个列表项使用 <li> 标签定义，默认情况下浏览器会给每个 <li> 前面添加实心圆点作为标记。基础的HTML结构如下：
<ul class="demo-list"> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> </ul>
二、CSS无序列表核心样式属性
CSS提供了多个专门用于控制列表样式的属性，我们逐个来看常用属性的作用和取值。
1. list-style-type：设置列表项标记类型
list-style-type 属性用于定义列表项前面标记的形状，对于无序列表，常用的取值有以下几种：
- disc：默认值，实心圆点
- circle：空心圆圈
- square：实心方块
- none：不显示任何标记
下面的代码示例展示了不同取值的效果：
/* 实心圆点，默认效果 */
.list-disc {
list-style-type: disc;
}
/* 空心圆圈 */
.list-circle {
list-style-type: circle;
}
/* 实心方块 */
.list-square {
list-style-type: square;
}
/* 不显示标记 */
.list-none {
list-style-type: none;
}2. list-style-position：设置标记的位置
list-style-position 属性用于定义列表项标记的位置，有两个常用取值：
- outside：默认值，标记位于列表项内容的外侧，也就是文本块的左边距区域
- inside：标记位于列表项内容的内部，会和文本内容一起换行
通过下面的代码可以直观看到两种位置的区别：
/* 标记在内容外侧，默认效果 */
.list-outside {
list-style-position: outside;
}
/* 标记在内容内部，文本换行时标记会和第一行文本对齐 */
.list-inside {
list-style-position: inside;
}3. list-style-image：使用图片作为列表标记
如果不想使用默认的形状标记，我们还可以通过 list-style-image 属性用自定义图片代替标记，取值为图片的URL路径。需要注意，如果图片加载失败，会 fallback 到 list-style-type 设置的默认标记。
/* 使用自定义图片作为列表标记 */
.list-image {
list-style-image: url('https://ipipp.com/list-icon.png');
/* 如果图片加载失败，使用实心方块作为备用标记 */
list-style-type: square;
}4. list-style：简写属性
上面的三个属性可以合并到 list-style 简写属性中，语法顺序为：list-style: list-style-type list-style-position list-style-image;，不需要设置的属性可以省略，但是如果要设置 list-style-image，通常建议同时设置 list-style-type 作为备用。
/* 简写：标记类型为实心方块，标记位置在内容内部，使用自定义图片 */
.list-shorthand {
list-style: square inside url('https://ipipp.com/list-icon.png');
}
/* 只设置标记类型，其他用默认值 */
.list-simple {
list-style: circle;
}三、常见无序列表样式实践
下面给出一个完整的实践示例，演示如何组合上面的属性实现不同的无序列表效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS无序列表示例</title>
<style>
/* 重置默认样式，去掉内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
font-family: "微软雅黑", sans-serif;
}
.list-container {
margin-bottom: 30px;
}
.list-title {
margin-bottom: 10px;
font-size: 18px;
color: #333;
}
/* 基础无序列表，默认样式 */
.base-list {
list-style-type: disc;
padding-left: 20px;
}
/* 无标记列表，常用于导航栏 */
.nav-list {
list-style: none;
display: flex;
gap: 20px;
}
.nav-list li {
padding: 8px 16px;
background-color: #f0f0f0;
border-radius: 4px;
}
/* 自定义图片标记列表 */
.icon-list {
list-style: square inside url('https://ipipp.com/small-icon.png');
padding-left: 20px;
}
/* 标记在内容内部的列表 */
.inside-list {
list-style: circle inside;
width: 200px; /* 限制宽度让文本换行，观察标记位置 */
border: 1px solid #ddd;
padding: 10px;
}
</style>
</head>
<body>
<div class="list-container">
<h3 class="list-title">1. 默认样式无序列表</h3>
<ul class="base-list">
<li>首页</li>
<li>产品介绍</li>
<li>关于我们</li>
</ul>
</div>
<div class="list-container">
<h3 class="list-title">2. 无标记导航列表</h3>
<ul class="nav-list">
<li>首页</li>
<li>产品</li>
<li>服务</li>
<li>联系我们</li>
</ul>
</div>
<div class="list-container">
<h3 class="list-title">3. 自定义图片标记列表</h3>
<ul class="icon-list">
<li>待办事项一</li>
<li>待办事项二</li>
<li>待办事项三</li>
</ul>
</div>
<div class="list-container">
<h3 class="list-title">4. 标记在内容内部的列表</h3>
<ul class="inside-list">
<li>这是一段比较长的列表项文本内容，用来测试标记在内容内部时的换行效果</li>
<li>第二个列表项，同样是比较长的文本，观察标记和文本的对齐方式</li>
</ul>
</div>
</body>
</html>上面的示例中包含了四种常见的无序列表场景：默认样式列表、无标记导航列表、自定义图片标记列表、标记在内容内部的列表，大家可以直接复制代码运行查看效果，根据实际需求调整属性值。
四、注意事项
- 如果同时设置了
list-style-image和list-style-type，浏览器会优先使用图片标记，只有图片加载失败时才会使用list-style-type指定的标记，建议设置图片时同时配置备用标记类型。 - 当设置
list-style-position: inside时，列表项标记会算入文本内容的宽度，如果列表项文本需要换行，标记会和第一行文本左对齐，而 outside 模式下标记始终在文本块左侧，不会随文本换行移动。 - 如果要去掉所有无序列表的默认样式，可以在CSS重置样式中加入
ul { list-style: none; padding-left: 0; }，避免默认的内边距影响布局。