li标签内嵌p标签导致内容偏离列表标记的原因咨询

核心原因：<p>是块级元素 #

浏览器默认样式里，<p>属于块级元素，它的特性是：

• 会独占父容器的整行宽度
• 默认带有上下外边距（margin）

结合你的CSS设置list-style-position: inside来看，这个属性会把列表项的标记（比如数字"2"）放到<li>的内容流内部，而不是在<li>的外边。此时<li>里面的<p>作为块级元素，会占满<li>的宽度，把标记挤到上方，导致"Item 2"被推到标记的下一行，形成换行效果。

你发现的解决方法为什么有效 #

1. 关闭list-style-position（即使用默认的outside）
   当设为outside时，列表标记会放在<li>的外部，不属于<li>的内容流。此时<li>内部的<p>虽然还是块级元素，但标记在<li>外面，视觉上就会和<p>的内容对齐，不会被挤到上方。

2. 把<p>换成<span>或移除<p>
<span>是行内元素，它不会独占一行，只会占据自身内容的宽度，所以会和列表标记在同一行显示。直接移除<p>的话，内部的<span>或者文本直接作为<li>的子元素，自然也不会破坏行内布局。

示例修改代码 #

如果想保留<p>标签同时让内容和标记同行，可以调整CSS：

.class-0-653 {
  color: #231f20;
  font-size: 1.0rem;
  line-height: 1.2em;
  /* 改为outside，或者去掉这个属性，默认就是outside */
  list-style-position: outside;
  margin-left: 4.68%;
  margin-right: 2.44%;
  text-indent: 5.0%;
}

/* 或者给p设置为行内块，保留p的同时不独占一行 */
.class-0-651 {
  text-align: justify;
  display: inline-block;
  margin: 0; /* 去掉p默认的上下外边距 */
}

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