设置overflow-x:hidden后列表项目符号消失的技术求助

问题根源 #

默认情况下，无序列表(ul)的圆点、有序列表(ol)的数字通过list-style-position: outside渲染——这类符号位于列表元素的内容框外部，属于元素盒模型的一部分但不占据content/padding/border空间。当body设置overflow-x:hidden时，视口外的内容会被强制截断，刚好把这些外部渲染的符号切掉，导致无法显示；移除overflow-x:hidden后符号恢复，但页面横向溢出的问题又出现。

可行解决方案 #

方案1：将符号移到内容框内部

修改列表的符号定位方式，让符号在元素的padding区域内渲染，避免超出视口范围：

ul, ol {
  list-style-position: inside;
  padding-left: 1em; /* 调整padding避免符号和文字拥挤 */
}

优点：简单直接，无需调整布局；缺点：符号会和文字在同一行起始位置，排版风格略有变化。

方案2：调整列表的边距，让符号留在视口内

保留list-style-position: outside，通过调整margin和padding，把符号的渲染区域拉回视口内：

ul, ol {
  list-style-position: outside;
  margin-left: 0; /* 清除默认左外边距 */
  padding-left: 1.5em; /* 给符号留出足够的显示空间 */
}

优点：保留默认的符号排版风格；缺点：需要根据字体大小微调padding-left的值。

方案3：避免给body设置overflow-x:hidden

把横向溢出的控制逻辑移到内部容器（比如页面主内容区main、应用容器#app），让body保持overflow-x:visible：

body {
  overflow-x: visible; /* 恢复默认 */
}
.main-container {
  overflow-x: hidden; /* 只在需要的容器上设置截断 */
  width: 100%;
}

优点：从根源避免了符号被截断的问题，同时不影响页面内部的横向溢出控制；缺点：需要调整布局结构，确保内部容器覆盖需要截断的区域。

为什么你之前的尝试无效 #

直接给ul/ol设置overflow-x:visible无法解决问题，因为body的overflow-x:hidden是视口级别的裁剪，子元素的overflow设置无法突破这个层级的截断规则。

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