Mit ungültigem HTML kann ich das gewünschte Aussehen erzielen, aber nicht mit gültigem HTML. Gibt es CSS, mit dem ich <FIGURE> konfigurieren kann, um den Effekt von <SPAN> zu simulieren?
Ich möchte, dass das Erscheinungsbild links und der gültige HTML-Code rechts angezeigt wird.
Ungültiges 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>
Gültiges 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>
您应该使用开发工具检查用户代理值
例如，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，覆盖破坏布局的属性，并添加所需的属性。
只是添加一些样式来重置默认样式。
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>