网站开发：段落内使用列表后移除换行问题求助

兄弟，你碰到的问题根源其实有俩：

1. <li> 本身是块级元素，浏览器默认样式会让它独占一行，后面的文本自然被挤到下一行；
2. 从HTML规范来讲，<p> 标签里不能直接嵌套 <li> 这种列表元素，属于无效DOM结构，浏览器会自动修正，反而可能引发更多排版异常。

给你几个可行的解决思路，按推荐优先级排序：

方案1：用行内元素模拟列表项（最规范） #

把<li>换成<span>，通过CSS加项目符号样式，既符合HTML嵌套规则，又能实现行内布局：

<div class="history">
  <h1 class="h-history">History</h1>
  <p class="p">It was established in 1879....</p>
  <h1 class="h-history">Areas and attractions</h1>
  <p class="p"><span class="inline-list-item">• Elephant House</span> is the first....</p>
</div>

对应的CSS：

.inline-list-item {
  margin-right: 0.5em; /* 给后面的文本留点间距 */
}

方案2：强制将<li>改为行内块（快速生效但不推荐） #

如果不想改动HTML结构，可以用CSS把<li>的显示模式改成inline-block，让它和文本同排：

<div class="history">
  <h1 class="h-history">History</h1>
  <p class="p">It was established in 1879....</p>
  <h1 class="h-history">Areas and attractions</h1>
  <p class="p"><li class="inline-li">Elephant House</li> is the first....</p>
</div>

CSS：

.inline-li {
  display: inline-block;
  margin: 0 0.5em 0 0;
  list-style: inside; /* 让项目符号和内容在同一行 */
}

⚠️ 注意：这个方案虽然能快速解决排版问题，但违反了HTML嵌套规范，长期来看可能有兼容性或DOM解析隐患，优先选方案1。

方案3：用定义列表实现语义化布局（适合术语+描述场景） #

如果你的内容是「景点名称+描述」的结构，用<dl>定义列表会更语义化，同时通过CSS实现行内效果：

<div class="history">
  <h1 class="h-history">History</h1>
  <p class="p">It was established in 1879....</p>
  <h1 class="h-history">Areas and attractions</h1>
  <dl class="attractions-list">
    <dt>Elephant House</dt>
    <dd>is the first....</dd>
  </dl>
</div>

CSS：

.attractions-list dt, .attractions-list dd {
  display: inline;
  margin: 0;
}
.attractions-list dt::after {
  content: ": "; /* 给名称和描述加个分隔符 */
}
.attractions-list dd::after {
  content: "\A"; /* 每个条目结束后换行 */
  white-space: pre;
}

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