在 <UL> 标签上定位文本答案

【问题标题】：Positioniong text on a <UL> tag在 <UL> 标签上定位文本
【发布时间】：2022-11-23 23:50:04
【问题描述】：

我创建了这个 jsfiddle 来显示这个问题。

https://jsfiddle.net/WayneCa/49amndpf/7/

使用无效的 HTML 我得到了我想要的外观，但使用有效的 HTML 我没有。是否有 CSS 允许我配置 <FIGURE> 或 <FIGCAPTION> 来模拟 <SPAN> 正在做什么？

我希望它看起来的方式在左边，有效的 HTML 在右边。

无效的 HTML：

    <UL> <SPAN style="font-weight: bold; text-decoration: underline; color: lemonchiffon">Color Code Guide</SPAN>
      <LI><SPAN style="color: DarkCyan">comment</SPAN></LI>
      <LI><SPAN style="color: Coral">processor directive</SPAN></LI>
      <LI><SPAN style="color: HotPink">#ifndef name</SPAN></LI>
      <LI><SPAN style="color: PaleTurquoise">library include</SPAN></LI>
      <LI><SPAN style="color: DarkSalmon">user-defined include</SPAN></LI>
      <LI><SPAN style="color: Gold">library function</SPAN></LI>
      <LI><SPAN style="color: DarkKhaki">initializer function</SPAN></LI>
      <LI>user-defined function</LI>
      <LI><SPAN style="color: DodgerBlue">keyword</SPAN></LI>
      <LI><SPAN style="color: Red">important symbol</SPAN></LI>
    </UL>

有效的 HTML：

    <FIGURE>
      <FIGCAPTION><SPAN style="font-weight: bold; text-decoration: underline; color: lemonchiffon">Color Code Guide</SPAN></FIGCAPTION>
      <UL>
        <LI><SPAN style="color: DarkCyan">comment</SPAN></LI>
        <LI><SPAN style="color: Coral">processor directive</SPAN></LI>
        <LI><SPAN style="color: HotPink">#ifndef name</SPAN></LI>
        <LI><SPAN style="color: PaleTurquoise">library include</SPAN></LI>
        <LI><SPAN style="color: DarkSalmon">user-defined include</SPAN></LI>
        <LI><SPAN style="color: Gold">library function</SPAN></LI>
        <LI><SPAN style="color: DarkKhaki">initializer function</SPAN></LI>
        <LI>user-defined function</LI>
        <LI><SPAN style="color: DodgerBlue">keyword</SPAN></LI>
        <LI><SPAN style="color: Red">important symbol</SPAN></LI>
      </UL>
    </FIGURE>

【问题讨论】：

标签： html css

【解决方案1】：

只需添加一些样式即可重置默认样式。

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

figure {
  margin: 0;
}

<FIGURE>
  <FIGCAPTION>
    <SPAN style="font-weight: bold; text-decoration: underline; color: lemonchiffon">Color Code Guide</SPAN>
  </FIGCAPTION>
  <UL>
    <LI>
      <SPAN style="color: DarkCyan">comment</SPAN>
    </LI>
    <LI>
      <SPAN style="color: Coral">processor directive</SPAN>
    </LI>
    <LI>
      <SPAN style="color: HotPink">#ifndef name</SPAN>
    </LI>
    <LI>
      <SPAN style="color: PaleTurquoise">library include</SPAN>
    </LI>
    <LI>
      <SPAN style="color: DarkSalmon">user-defined include</SPAN>
    </LI>
    <LI>
      <SPAN style="color: Gold">library function</SPAN>
    </LI>
    <LI>
      <SPAN style="color: DarkKhaki">initializer function</SPAN>
    </LI>
    <LI>user-defined function</LI>
    <LI>
      <SPAN style="color: DodgerBlue">keyword</SPAN>
    </LI>
    <LI>
      <SPAN style="color: Red">important symbol</SPAN>
    </LI>
  </UL>
</FIGURE>

【讨论】：

【解决方案2】：

您应该使用开发工具检查用户代理值

例如，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 覆盖破坏布局的属性，并添加所需的属性。

【讨论】：

【解决方案3】：

将 UL 的 padding 和 margin 设置为 0。这将删除空格。

<FIGURE>
      <FIGCAPTION><SPAN style="font-weight: bold; text-decoration: underline; color: lemonchiffon">Color Code Guide</SPAN></FIGCAPTION>
      <UL style="margin: 0;padding: 0">
        <LI><SPAN style="color: DarkCyan">comment</SPAN></LI>
        <LI><SPAN style="color: Coral">processor directive</SPAN></LI>
        <LI><SPAN style="color: HotPink">#ifndef name</SPAN></LI>
        <LI><SPAN style="color: PaleTurquoise">library include</SPAN></LI>
        <LI><SPAN style="color: DarkSalmon">user-defined include</SPAN></LI>
        <LI><SPAN style="color: Gold">library function</SPAN></LI>
        <LI><SPAN style="color: DarkKhaki">initializer function</SPAN></LI>
        <LI>user-defined function</LI>
        <LI><SPAN style="color: DodgerBlue">keyword</SPAN></LI>
        <LI><SPAN style="color: Red">important symbol</SPAN></LI>
      </UL>
    </FIGURE>

【讨论】：