使用无效的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>
您应该使用开发工具检查用户代理值
例如,TD下的第一个元素是ul或figure。在Chrome中的标准如下:
因此,如果您想保持figure与ul布局,请在您的样式中添加figure,覆盖破坏布局的属性,并添加所需的属性。
只是添加一些样式来重置默认样式。