css 前端 javascript css3 解决html中ol ul li的默认往左偏移的样式问题

在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;

}

参考链接

 您阅读本篇文章共花了：