如何排除CSS Grid/SubGrid行内元素并正确布局嵌套网格？

你遇到的核心问题是：当用Grid控制列表编号/缩进时，行内元素（如<strong>）被误识别为Grid项目，破坏了正常的行内文本流。下面给出精准的解决思路和代码实现：

核心思路 #

只让<li>的编号容器和文本内容容器作为Grid项目，将所有行内元素包裹在文本内容容器内，让它们保持默认的行内流表现，不参与Grid布局。

实现方案（两种可选） #

方案1：用伪元素生成编号（无需额外HTML结构） #

这种方式最简洁，利用CSS伪元素承担编号/项目符号的Grid项目角色，文本内容自动作为另一个Grid项目，行内元素自然保留正常表现。

/* 重置列表默认样式 */
ul, ol {
  list-style: none;
  padding-left: 1cm; /* 左侧缩进1cm，满足你的需求 */
}

/* 给<li>设置Grid布局 */
li {
  display: grid;
  grid-template-columns: 2em 1fr; /* 编号固定宽度，内容占剩余空间 */
  align-items: start;
  gap: 0.6em; /* 编号与内容的间距 */
  margin-bottom: 0.4em;
}

/* 有序列表编号：支持多位数对齐 */
ol li::before {
  content: counter(list-item);
  width: 2em;
  text-align: right; /* 让1、10、100这类编号右对齐 */
  padding-right: 0.3em;
  color: #333;
}

/* 无序列表项目符号 */
ul li::before {
  content: "•";
  font-size: 1.3em;
  text-align: center;
  color: #555;
}

对应的HTML结构完全正常：

<ol>
  <li>普通文本内容，<strong>加粗部分</strong>和后续文本正常排列，不会错乱</li>
  <li>第二行列表项，<em>斜体文本</em>、<span>普通行内元素</span>都保持原有行内表现</li>
</ol>

<ul>
  <li>无序列表项，<strong>加粗内容</strong>和普通文本在同一行流畅显示</li>
</ul>

方案2：嵌套HTML容器（更灵活的自定义编号） #

如果需要更复杂的编号样式（比如带图标、自定义文字），可以用显式的容器拆分编号和内容：

<ol>
  <li>
    <span class="list-number">1</span>
    <span class="list-content">这是文本内容，<strong>加粗元素</strong>和其他行内元素正常显示</span>
  </li>
</ol>

ul, ol {
  list-style: none;
  padding-left: 1cm;
}

li {
  display: grid;
  grid-template-columns: 2em 1fr;
  gap: 0.6em;
}

.list-number {
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.2em 0;
}

.list-content {
  /* 行内元素默认在这个容器里保持正常流，无需额外设置 */
}

为什么之前的尝试失败？ #

如果直接给<li>设置display: grid但没有隔离文本内容，<strong>等行内元素会被浏览器自动包装成匿名Grid项目，导致文本被拆分成多个Grid单元格，出现布局错乱。现在通过伪元素或显式容器，将行内元素限定在单个Grid项目内部，就能让它们保持正常的行内排版。

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