如何实现带多行文本缩进且编号与内容同行的有序列表

嘿，我完全懂你现在的困扰——想让列表编号和段落内容乖乖待在同一行，同时段落换行后还能和第一行保持对齐，结果试来试去要么换行乱了缩进，要么编号和内容分家，对吧？

咱们先来拆解下问题：你之前给::before和p加了display: inline，确实能让它们在同一行，但p变成行内元素后，换行就不会自动缩进了；要是去掉inline，这俩又都是块级元素，自然会分成两行。

给你分享两个实用的解决办法，随便选一个都能搞定：

方法一：用Flex布局（推荐，现代浏览器友好） #

这种方法靠Flex来控制列表项内部的布局，既能让编号和内容同行，又能保证段落换行后缩进正常：

ol {
  counter-reset: item;
  list-style: none;
  padding: 0;
  margin: 0;
}

ol li {
  display: flex;
  align-items: flex-start; /* 让编号和段落顶部对齐，避免内容多行时错位 */
  margin-bottom: 8px; /* 可选，给列表项之间加些间距 */
}

ol li::before {
  counter-increment: item;
  content: counter(item) ".";
  padding-right: 24px; /* 调整编号和内容的间距 */
}

ol li p {
  flex: 1; /* 让段落占满剩余空间，换行时自动缩进 */
  margin: 0; /* 去掉p标签默认的上下margin，避免多余间距 */
}

原理很简单：把li设为Flex容器，编号和p作为Flex子元素，默认就会在同一行排列；p保持块级元素的特性，换行时自然会和第一行内容对齐，不会跑到编号下面。

方法二：绝对定位编号（兼容旧浏览器） #

如果需要兼容一些不支持Flex的旧浏览器，可以用绝对定位来固定编号的位置：

ol {
  counter-reset: item;
  list-style: none;
  padding: 0;
  margin: 0;
}

ol li {
  position: relative;
  padding-left: 40px; /* 给编号留出足够的空间 */
  margin-bottom: 8px;
}

ol li::before {
  counter-increment: item;
  content: counter(item) ".";
  position: absolute;
  left: 0;
  padding-right: 16px; /* 调整编号和内容的间距 */
}

ol li p {
  margin: 0; /* 去掉p默认的margin */
}

这个思路是：给li设置相对定位，把编号::before绝对定位到li的左侧；li的padding-left会让内部的p内容向右偏移，这样段落换行时就会跟着这个偏移量对齐，同时编号和第一行内容保持在同一水平线。

你可以根据自己的项目需求选其中一种方法，测试一下，应该就能解决你的问题啦！

备注：内容来源于stack exchange，提问作者Nick Groeneveld