如何使列表项与上方文本对齐？用CSS配置FIGURE/FIGCAPTION实现目标样式

问题根源在浏览器默认样式差异：

• 你之前的无效HTML里，<span>是行内元素，被浏览器容错渲染在<ul>内部，会继承<ul>的缩进，和列表项处于同一文本流；
• 规范HTML里的<figcaption>和<ul>都是块级元素，默认各自独占一行，且<figure>、<figcaption>自带默认外边距，导致排版和预期不符。

以下是两种适配需求的CSS方案，按需选择：

方案1：标题与列表同行（模仿原无效HTML的行内排版） #

在原有CSS基础上添加以下规则：

figure {
  /* 移除figure默认外边距 */
  margin: 0;
}
figcaption {
  /* 将figcaption改为行内元素，与ul同行显示 */
  display: inline;
  /* 把行内样式迁移到CSS，更规范 */
  font-weight: bold;
  text-decoration: underline;
  color: lemonchiffon;
}
ul {
  /* 将ul设为行内块，保留列表结构的同时与figcaption同行 */
  display: inline-block;
  /* 调整列表符号位置，避免排版错乱 */
  list-style-position: inside;
  /* 移除默认左外边距，让列表与标题紧密对齐 */
  margin-left: 0.5em;
  padding-left: 0;
}

对应的规范HTML可简化行内样式：

<FIGURE>
  <FIGCAPTION>Color Code Guide</FIGCAPTION>
  <UL>
    <LI><SPAN style="color: DarkCyan">comment</SPAN></LI>
    <!-- 其余列表项保持不变 -->
  </UL>
</FIGURE>

方案2：标题与列表上下排列但缩进对齐（保留块级结构） #

若仅需标题与列表缩进一致、无需同行，使用此方案：

figure {
  margin: 0;
}
figcaption {
  /* 让标题缩进与ul默认值匹配，可根据实际需求调整数值 */
  margin-left: 1.5em;
  font-weight: bold;
  text-decoration: underline;
  color: lemonchiffon;
}
ul {
  /* 移除标题与列表间的默认间距 */
  margin-top: 0.2em;
}

配置后，规范HTML的排版即可和你之前用无效HTML实现的效果一致。

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