讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > css教程 >

正文

0

0

CSS中有关list-style的深入理解

黄舟

黄舟

发布时间：2017-06-29 09:25:55

|

3294人浏览过

|

来源于php中文网

原创

先看一下css手册中,对于list-style的解释

定义和用法
list-style 简写属性在一个声明中设置所有的列表属性。

       说明
       该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。
       可以按顺序设置如下属性：
       •list-style-type
       •list-style-position
       •list-style-image
       可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。
       默认值： disc outside none

 

在日常工作中经常需要对ul,li进行css reset ,将列表符号隐藏.
最常用的写法就是Ul,li,ol{list-style:none;}(也有人用ul,li,ol{list-style-type:none;})

立即学习“前端免费学习笔记（深入）”；

运行代码框

课游记AI
课游记AI

AI原生学习产品

下载 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="fanfan,xiangrui09@qq.com" />
<title>常见的用法</title>
<style type="text/css">
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
ul,li{list-style:none;}
</style>
</head>
<body>
<div>
<p>1: list-style:none;</p>
<ul>
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
</body>
</html>

这个页面在IE6,7,8,FF中都没什么问题.

但是我们不能忽略的是,list-style: 包含了三个属性:

list-style-type
list-style-position
list-style-img

如果不注意这三个属性的话,list-style有时候就会出来捣蛋

比如当ul,浮动后,需要display:inline 来解决在IE6中的双倍边距问题时,奇怪的事情发生了:

运行代码框

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="fanfan,xiangrui09@qq.com" />
<title>奇怪的事情发生了</title>
<style type="text/css">
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
</style>
</head>
<body>
<div>
<p>1: list-style:none;</p>
<ul class="ul01">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
</body>
</html>

.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}

上面的页面在ie8,ff中仍然正常 
但是在IE6,7中,ul内侧与li产生了距离.
由此可见,当我们定义了list-style:none以后,尽管列表符并不出现,但是在IE6,7中,仍然留有它的位置.
看看在FF里这个UL到底拥有哪些属性

1628.jpg

图上可见,当css中定义list-style:none时,对list-style-position 并没有影响,仍然是FF浏览器的默认设置,值为outside
而IE6,7中很可能默认list-style-position:inside
为了证实这一点,我把list-style:none 换为list-style:none inside none再测试了一下

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="fanfan,xiangrui09@qq.com" />
<title>强制inside</title>
<style type="text/css">
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;list-style:none inside none;}
</style>
</head>
<body>
<div>
<p>强制inside list-style:none inside none;</p>
<ul>
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
</body>
</html>

运行后可以发现,在IE6,7中,与list-style:none的表现一模一样.
所以我推测在IE6,7中当UL具有float:left和display:inline属性后,设置了list-style:none,则list-style-position也默认为inside了;

所以我得出的总结是
在IE6,7下,当UL不具有float:left;display:inline;时:
无论有没有list-style:none这个属性,列表符都被隐藏,不占位置(下面代码中的5,6)
当UL具有float:left;display:inline;属性时
list-style:none,列表符被隐藏,但是仍然留有位置(list-style-position:inside);(下面代码中的 UL1,ul3)
未设置list-style:none;列表符被隐藏,也不占位(list-style-position:outside)(代码UL4)

而UL02 在参与测试的各浏览器中表现都比较理想

最后这一段代码对比一下各种情况下list-style的表现,尤其注意4,5,6在IE6,7下的表现

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>list-style:none还是list-style:none outside none;</title>
<style type="text/css">
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin:0 10px 10px 0;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
.ul01,.ul02,.ul03,.ul04{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
.ul02,.ul02 li{list-style:none outside none;}
.ul03,.ul03 li{list-style:none inside none;}
.ul04,.ul04 li{}
.ul05{}
.ul05,.ul05 li{list-style:none;}
.ul06{}
.ul06,.ul06 li{}
</style>
</head>
<body>
<div>
<p>1:float:left;display:inline; list-style:none;</p>
<ul class="ul01">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
<div>
<p>2:float:left;display:inline; list-style:none outside none;</p>
<ul class="ul02">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
<div>
<p>3: float:left;display:inline;list-style:none inside none;</p>
<ul class="ul03">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
<div>
<p>4:float:left;display:inline;未做css reset</p>
<ul class="ul04">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
<div>
<p>5: 无 display,float属性 list-style为none;</p>
<ul class="ul05">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
<div>
<p>6: 无 display,float属性 无list-style:none;</p>
<ul class="ul06">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
</body>
</html>

通过上面代码表现结果的对比,我认为:
在firefox中只要list-style-type为none ,则无论list-stype-position的值为outside或inside , list-style都能很好的被隐藏
而在IE6,7中,仅设置list-style:none,并不足以解决所有问题
所以我认为在css reset的时候使用 list-style:none outside none 更好

相关文章

CSS如何处理弹性布局下的列表项目符号_通过list-style配合flex布局

CSS如何设置列表项的缩进量_利用padding-inline-start样式

CSS如何定位列表项中的状态圆点_利用absolute定位在li元素的左侧css

CSS响应式列表样式调整_移动端列表项间距与对齐优化

CSS浮动与列表样式_解决li浮动后list-style消失的问题

相关标签:

css

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：CSS中list-style-type: none的含义是什么？ 下一篇：css中list-style:none为什么不起作用？

作者最新文章

HTML5 Placeholder属性的详情介绍

2018-05-30 09:51

html中关于标签的全部属性的使用总结

2018-05-30 14:32

php如何快速实现数组去重的实例

2018-05-30 15:03

php中关于IMAP如何收取邮件的方法介绍

2018-05-31 09:38

PHPMailer如何利用QQ邮箱完成邮件发送功能的实例分析

2018-05-31 10:28

从零开始打造自己的PHP框架的视频资料

2018-05-31 10:45

php基础知识总结（新手入门必备）

2018-05-30 14:26

ReactJS中表单的单选多选与反选的实现方法

2018-05-30 09:45

JavaScript中typeof的使用方法介绍

2018-05-30 11:42

JavaScript中confirm()方法的使用介绍

2018-05-30 10:29

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

AI编程开发AI聊天问答
豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

AI编程开发AI大模型
WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

AI办公学习Agent智能体
腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文档处理Excel 表格
文心一言
文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI编程开发AI文本写作
讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI文本写作中文写作
即梦AI
即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接图画生成
ChatGPT
ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI编程开发AI文本写作
智谱清言 - 免费全能的AI助手
智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI编程开发Agent智能体

相关专题

更多
chatgpt使用指南
chatgpt使用指南

本专题整合了chatgpt使用教程、新手使用说明等等相关内容，阅读专题下面的文章了解更多详细内容。

0

2026.03.16

chatgpt官网入口地址合集
chatgpt官网入口地址合集

本专题整合了chatgpt官网入口地址、使用教程等内容，阅读专题下面的文章了解更多详细内容。

0

2026.03.16

minimax入口地址汇总
minimax入口地址汇总

本专题整合了minimax相关入口合集，阅读专题下面的文章了解更多详细地址。

4

2026.03.16

C++多线程并发控制与线程安全设计实践
C++多线程并发控制与线程安全设计实践

本专题围绕 C++ 在高性能系统开发中的并发控制技术展开，系统讲解多线程编程模型与线程安全设计方法。内容包括互斥锁、读写锁、条件变量、原子操作以及线程池实现机制，同时结合实际案例分析并发竞争、死锁避免与性能优化策略。通过实践讲解，帮助开发者掌握构建稳定高效并发系统的关键技术。

7

2026.03.16

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开，深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析，帮助开发者构建类型安全、结构清晰、易维护的前端工程体系，提高团队协作效率与代码质量。

114

2026.03.13

Python异步编程与Asyncio高并发应用实践
Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开，深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例，帮助开发者掌握 Python 在高并发场景中的高效开发方法，并提升系统资源利用率与整体运行性能。

141

2026.03.12

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开，系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例，帮助开发者掌握构建高可用微服务系统的关键技术，提高系统的可扩展性与维护效率。

396

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开，系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示，帮助开发者构建稳定高效的 Go 并发任务处理系统，提高系统在高负载环境下的处理能力与稳定性。

65

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开，重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析，帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系，提升团队协作效率与项目迭代速度。

111

2026.03.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
php商城系统
淘源码商城PHP淘宝查信誉
PHP房产程序[BBWPS]
PHP简约自动发卡平台个人版
ERMEB域名PHP离线网络授权系统
Difeye-敏捷的轻量级PHP框架
大泉州汽车网PHP整站程序

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
XSL-FO 教程
XSL-FO 教程

共14课时 | 9.5万人学习

XSLT 教程
XSLT 教程

共20课时 | 10.3万人学习

CSS高级实例视频教程
CSS高级实例视频教程

共40课时 | 8.4万人学习

最新文章

更多
CSS如何使用伪类实现具有响应式特征的按钮点击态_在移动端优化css反馈
CSS如何实现响应式的模态弹窗宽度_利用百分比配合max-width约束css
CSS如何设置文字倾斜_通过font-style: italic实现
CSS如何合并多个选择器的共有样式_通过逗号分隔多个css选择器
CSS如何给列表编号自定义样式_通过::marker伪元素直接选中序号
CSS如何用流式布局代替固定宽度_把主要的容器宽度由px转换为百分比或vw
CSS如何让鼠标悬停时图片缓慢放大
CSS如何做一个带有圆角切角的优惠券样式_利用径向渐变模拟镂空css
CSS如何处理布局中的点击事件穿透问题_利用Pointer-events控制css响应
CSS如何实现一个简单的多级下拉菜单_通过Hover控制子列表Display样式css
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部