在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数据库,是一个开箱即用的全渠道在线客服系统,致力于帮助广大开发者/公司快速部署整合私有化客服功能。
开源地址:唯一客服(开源学习版)