胖蔡说技术
随便扯扯

html去除列表样式

我们在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>

通过paddingmarign可以消除列表的li元素的内外边距。显示效果如下:

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » html去除列表样式
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏