標題重寫為：如何使清單項目與上方的文字對齊？

Question

使用無效的HTML，我可以得到我想要的外觀，但使用有效的HTML則不行。是否有CSS可以讓我配置<FIGURE>或<FIGCAPTION>模擬<SPAN>的效果？

我希望它的外觀在左邊，有效的HTML在右邊。

無效的HTML：

body {
  margin: auto;
  padding: 0 5px 0 5px;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 12pt;
  background-color: black;
  color: white;
}

<UL>
  <SPAN style="font-weight: bold; text-decoration: underline; color: lemonchiffon">颜色代码指南</SPAN>
  <LI>
    <SPAN style="color: DarkCyan">注释</SPAN>
  </LI>
  <LI>
    <SPAN style="color: Coral">处理器指令</SPAN>
  </LI>
  <LI>
    <SPAN style="color: HotPink">#ifndef name</SPAN>
  </LI>
  <LI>
    <SPAN style="color: PaleTurquoise">库包含</SPAN>
  </LI>
  <LI>
    <SPAN style="color: DarkSalmon">用户定义的包含</SPAN>
  </LI>
  <LI>
    <SPAN style="color: Gold">库函数</SPAN>
  </LI>
  <LI>
    <SPAN style="color: DarkKhaki">初始化函数</SPAN>
  </LI>
  <LI>用户定义的函数</LI>
  <LI>
    <SPAN style="color: DodgerBlue">关键字</SPAN>
  </LI>
  <LI>
    <SPAN style="color: Red">重要符号</SPAN>
  </LI>
</UL>

有效的HTML：

body {
  margin: auto;
  padding: 0 5px 0 5px;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 12pt;
  background-color: black;
  color: white;
}

<FIGURE>
  <FIGCAPTION>
    <SPAN style="font-weight: bold; text-decoration: underline; color: lemonchiffon">颜色代码指南</SPAN>
  </FIGCAPTION>
  <UL>
    <LI>
      <SPAN style="color: DarkCyan">注释</SPAN>
    </LI>
    <LI>
      <SPAN style="color: Coral">处理器指令</SPAN>
    </LI>
    <LI>
      <SPAN style="color: HotPink">#ifndef name</SPAN>
    </LI>
    <LI>
      <SPAN style="color: PaleTurquoise">库包含</SPAN>
    </LI>
    <LI>
      <SPAN style="color: DarkSalmon">用户定义的包含</SPAN>
    </LI>
    <LI>
      <SPAN style="color: Gold">库函数</SPAN>
    </LI>
    <LI>
      <SPAN style="color: DarkKhaki">初始化函数</SPAN>
    </LI>
    <LI>用户定义的函数</LI>
    <LI>
      <SPAN style="color: DodgerBlue">关键字</SPAN>
    </LI>
    <LI>
      <SPAN style="color: Red">重要符号</SPAN>
    </LI>
  </UL>
</FIGURE>

Answer 1

您應該使用開發工具檢查使用者代理值

例如，TD下的第一個元素是ul或figure。在Chrome中的標準如下：

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
figure {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
}

因此，如果您想要保持figure與ul佈局，請在您的樣式中新增figure，覆寫破壞佈局的屬性，並新增所需的屬性。

Answer 2

只是添加一些樣式來重置預設樣式。

ul {
  padding: 0; 
  margin: 0;
  list-style-position: inside;
}

<FIGURE>
  <FIGCAPTION>
    <SPAN style="font-weight: bold; text-decoration: underline; color: lemonchiffon">颜色代码指南</SPAN>
  </FIGCAPTION>
  <UL>
    <LI>
      <SPAN style="color: DarkCyan">注释</SPAN>
    </LI>
    <LI>
      <SPAN style="color: Coral">处理器指令</SPAN>
    </LI>
    <LI>
      <SPAN style="color: HotPink">#ifndef 名称</SPAN>
    </LI>
    <LI>
      <SPAN style="color: PaleTurquoise">库包含</SPAN>
    </LI>
    <LI>
      <SPAN style="color: DarkSalmon">用户定义的包含</SPAN>
    </LI>
    <LI>
      <SPAN style="color: Gold">库函数</SPAN>
    </LI>
    <LI>
      <SPAN style="color: DarkKhaki">初始化函数</SPAN>
    </LI>
    <LI>用户定义的函数</LI>
    <LI>
      <SPAN style="color: DodgerBlue">关键字</SPAN>
    </LI>
    <LI>
      <SPAN style="color: Red">重要符号</SPAN>
    </LI>
  </UL>
</FIGURE>