设置text-align:center后有序列表序号与标题换行问题求助

问题原因 #

你遇到的换行问题核心在于h3是块级元素，默认会独占一行。即使给ol设置了list-style-position:inside，列表序号会作为li内容的一部分显示在第一行，而h3会自动换行到下一行，导致两者分离。

解决方案 #

方法1：将h3改为行内块元素 #

通过修改h3的display属性，让它不再独占一行，即可和序号在同一行显示：

* {
  text-align: center;
}

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

li h3 {
  display: inline-block;
  vertical-align: middle; /* 可选：让序号与标题垂直居中对齐 */
  margin: 0; /* 移除h3默认上下外边距，优化间距 */
}

方法2：用Flex布局控制li内部排版 #

给li设置flex布局，能更灵活地控制序号与标题的对齐方式和间距：

* {
  text-align: center;
}

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

li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em; /* 控制序号与标题的间距 */
  margin: 1em 0; /* 可选：给li添加上下间距，提升可读性 */
}

li h3 {
  margin: 0;
}

两种方法都能实现序号与h3标题同行的效果，可根据实际布局需求选择。

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