CSS设置list-style-position后列表项意外换行如何解决？

<li>标签内部嵌套块级元素<p>是触发排版异常的直接原因。list-style-position: inside规则下，项目符号会作为行内起始元素渲染，而<p>默认是占满整行的块级元素，会被挤到新行展示，最终出现项目符号单独占一行、列表文本换行错位的效果。
另外你现有代码还存在类名不匹配问题：头部角色栏的div类名是job1-rolename，但对应CSS写的是.expName，这部分样式不会生效，记得同步修正。

• 方案1（最简实现）：直接移除<li>内部的<p>标签，让描述文本直接作为<li>的子元素，即可让项目符号和文本正常同行。
  修改后的列表HTML示例：

  <ul>
    <li>description1</li>
    <li>description2</li>
    <li>description3</li>
  </ul>
  

• 方案2（保留p标签）：如果需要保留<p>标签来控制文本行高、段落间距等样式，无需改动HTML结构，追加一段CSS重置<p>的默认块级属性即可：

  .project1 li {
    list-style-position: inside;
  }
  /* 新增以下样式 */
  .project1 li p {
    display: inline;
    margin: 0;
    padding-left: 4px; /* 可按需调整符号和文本的间距 */
  }
  

• 方案3（简历场景推荐）：放弃默认列表样式，用伪元素自定义项目符号，排版可控度更高，不会出现位置偏移问题，还能自由调整符号样式、缩进距离，完美适配简历需要的精准排版要求：

  /* 先修正类名不匹配的问题 */
  .job1-rolename {
    display: flex;
    justify-content: space-between;
    padding-bottom: 4px;
  }
  .job1-rolename h5 {
    text-align: right;
  }
  /* 自定义列表样式 */
  .project1 ul {
    list-style: none;
    padding-left: 16px; /* 控制列表整体左缩进，将项目符号完全包含在内容边距内 */
    margin: 0;
  }
  .project1 li {
    position: relative;
    padding-left: 12px; /* 控制符号和文本的间距 */
    margin-bottom: 6px;
  }
  .project1 li::before {
    content: "•"; /* 可替换为任意符号，比如■、✓等适配简历风格 */
    position: absolute;
    left: 0;
  }
  

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