解决html中ol ul li的默认往左偏移的样式问题

Posted 2023-03-26 唯一在线客服系统-开发技术笔记

在HTML中，有序列表(ol)和无序列表(ul)元素通常会默认有一定的内边距(padding)和外边距(margin)，这是由浏览器默认样式表所定义的。这些内边距和外边距可能导致列表向左偏移，从而出现左边超出的情况。

具体来说，ol和ul元素的默认样式表通常会定义：

• padding-left：列表项左侧的内边距，默认为 40px（不同浏览器可能略有不同）。
• margin-left：列表元素左侧的外边距，默认为 0。

因此，当你在HTML中使用ol或ul元素时，它们的左边可能会默认超出。

解决

/* 去掉有序列表和无序列表的默认样式 */
ol, ul 
  margin: 0;
  padding: 0;
  list-style-type: none;


/* 为有序列表添加数字编号 */
ol 
  list-style-type: decimal;
  margin-left: 20px;


/* 为无序列表添加实心圆点符号 */
ul 
  list-style-type: disc;
  margin-left: 20px;

 

十年开发经验程序员，离职全心创业中，历时三年开发出的产品《唯一客服系统》

一款基于Golang+Vue开发的在线客服系统，软件著作权编号：2021SR1462600。一套可私有化部署的网站在线客服系统，编译后的二进制文件可直接使用无需搭开发环境，下载zip解压即可，仅依赖MySQL数据库，是一个开箱即用的全渠道在线客服系统，致力于帮助广大开发者/公司快速部署整合私有化客服功能。

开源地址：唯一客服（开源学习版）

官网地址：唯一客服官网