胖蔡说技术我们在Html中通常使用ul和li实现列表功能。但是默认的li列表功能左侧会有一个小圆圈，但大场景对于列表会有额外的要求，如后台管理系统的菜单列表。本篇文章我们通过一个示例来学习下如何清除html中列表的样式。
创建一个基础的列表示例
首先，我们通过一个基础的html示例来了解下原生的列表时什么样子的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Html中如何清除列表的默认样式</title>
</head>
<body>
<ul class="ul">
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
<li>列表四</li>
</ul>
</body>
</html>
通过CSS去除列表默认样式
我们可以通过CSS设置实现默认列表样式的修改，如上示例，添加CSS代码：
<style>
.ul {
list-style:none; // 去除小圆点
padding:0; // li内边距
margin:0; // li外边距
}
</style>通过padding和marign可以消除列表的li元素的内外边距。显示效果如下：
