如何让ul/ol元素下的li元素不向右偏移、保持对齐？

偏移原因 #

浏览器对<ul>、<ol>元素默认设置了padding-left属性（绝大多数浏览器默认值为40px），同时列表项标记（圆点、数字等）默认渲染在内容区域外侧，两者共同作用导致li整体向右偏移。

可行实现方案 #

方案1：单列表针对性调整 #

如果仅需要调整单个列表的对齐效果，直接给目标ul设置样式即可：

• 不需要保留列表标记的场景：

ul {
  padding-left: 0;
  list-style: none;
}

• 需要保留列表标记的场景：

ul {
  padding-left: 0;
  list-style-position: inside;
}

方案2：全局样式重置（适合全站统一规范） #

直接全局清除所有列表的默认样式，避免不同浏览器的默认样式差异导致的排版不一致：

/* 全局基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, ol {
  list-style-position: inside;
  /* 不需要标记就替换为 list-style: none; */
}

注意事项 #

• 如果未设置list-style-position: inside，直接把ul的padding-left设为0会导致列表标记跑到可视区域外
• 复杂项目建议统一引入CSS Reset规则，提前消除所有原生元素的默认样式差异，降低排版出错概率

内容的提问来源于stack exchange，提问作者Butt chicks