CSS列表样式

最新推荐文章于 2025-04-20 15:01:44 发布

雪子

最新推荐文章于 2025-04-20 15:01:44 发布

阅读量596

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS列表

本文链接：https://blog.youkuaiyun.com/Kermit_father/article/details/86422914

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了CSS如何设置有序和无序列表的样式，包括使用`list-style-type`设置列表项标记，用`list-style-image`展示图像标记，以及如何通过CSS解决不同浏览器间列表样式的兼容问题。示例中展示了去除列表项标记的方法和实现浏览器兼容的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS列表属性作用如下

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

无序列表：用特殊图形标记列表项

有序列表：用数字或字母标记列表项

CSS列表属性

属性	描述
list-style	简写属性，用于吧所有列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志
list-style-position	设置列表中列表项标志的位置
list-style-type	设置列表项标志的类型

属性list-style-type举例：

<html>
<head>
<meta charset="utf-8"> 
<title>list-style-type学习</title> 
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>无序列表实例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

输出样式：

属性list-style-image举例：

<html>
<head>
<meta charset="utf-8"> 
<title>list-style-image学习</title> 
<style>
ul 
{
	list-style-image:url('sqpurple.gif');
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

输出：

设置列表中某一行的属性：

例如：去除上面样式中第一行前面的标记（有些场景会用到）

<html>
<head>
<meta charset="utf-8"> 
<title>有趣的列表样式</title> 
<style>
ul 
{
	list-style:square url("sqpurple.gif");
}
</style>
</head>

<body>
<ul>
<li style="list-style:none">Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

输出：

可以看到，第一行coffee前面的标记被去除了

列表的浏览器兼容问题

上面的例子在所有浏览器中显示并不相同，IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。

如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下

解决方案：

简单的说就是：ul 不设置样式，在li中设置具体方案

ul:
    设置列表样式类型为没有删除列表项标记
    设置填充和边距0px（浏览器兼容性）
ul中所有li:
    设置图像的URL，并设置它只显示一次（无重复）
    您需要的定位图像位置（左0px和上下5px）
    用padding-left属性把文本置于列表中

举例：

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
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;
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>

输出：