如何移除列表内边距且不使列表标记超出视口？

我尝试了几种CSS方案来移除ol/ul块的默认padding-inline-start属性，测试代码如下：

CSS 代码 #

div {width:300px;}

#d2 ol {padding:0}

#d3 ol {list-style-position:inside;padding:0}

#d4 ol {padding:1em}

#d5 ol {padding-inline-start:20px}

HTML 代码 #

<h2>1. Default CSS</h2>
<div id="d1">
<p>Normal text</p>
<ol>
  <li>List item</li>
  <li>Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...</li>
</ol>
<p>Normal text</p>
</div>


<h2>2. Padding 0</h2>
<div id="d2">
<p>Normal text</p>
<ol>
  <li>List item</li>
  <li>Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...</li>
</ol>
<p>Normal text</p>
</div>


<h2>3. Padding 0 + List Style Position Inside</h2>
<div id="d3">
<p>Normal text</p>
<ol>
  <li>List item</li>
  <li>Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...</li>
</ol>
<p>Normal text</p>
</div>

<h2>4. Padding 1em</h2>
<div id="d4">
<p>Normal text</p>
<ol>
  <li>List item</li>
  <li>Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...</li>
</ol>
<p>Normal text</p>
</div>
<h2>5. Padding-inline start 20px</h2>
<div id="d5">
<p>Normal text</p>
<ol>
  <li>List item</li>
  <li>Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...Lite item... longer text...</li>
</ol>
<p>Normal text</p>
</div>

各方案缺陷分析 #

• 方案1（padding:0）：列表标记会超出容器视口，排版完全混乱，无法使用。
• 方案2（padding:0 + list-style-position:inside）：列表左边缘和正文对齐，但长文本会环绕在列表标记下方，视觉层级混乱，阅读体验极差。
• 方案3（padding:1em）：视觉效果达标，但1em是经验值，无法保证在不同字体大小、多位数序号的ol场景下都适配。
• 方案4（padding-inline-start:20px）：和方案3效果类似，但固定像素值在响应式场景或字体缩放时会失效，适配性差。

最优解 #

推荐使用相对单位的padding-inline-start，结合默认的list-style-position:outside，同时根据列表标记的实际宽度动态调整。

最稳妥的通用写法：

ol, ul {
  padding-inline-start: 1.25em; /* 适配多数场景的相对单位，可根据字体或标记样式微调 */
}

如果需要更精准的控制，可以用CSS变量动态适配：

ol, ul {
  --list-marker-width: 1.2em;
  padding-inline-start: var(--list-marker-width);
}

这种方案的核心优势：

1. 相对单位em会随字体大小自动缩放，完美适配响应式布局和字体缩放场景；
2. 保持默认的list-style-position:outside，长文本不会环绕标记，阅读体验流畅；
3. 可根据实际列表类型（比如ol的序号位数、ul的自定义标记）微调变量值，兼顾美观与适配性。

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