Using invalid HTML I can get the look I want, but not using valid HTML. Is there CSS that allows me to configure <FIGURE> or <FIGCAPTION> to simulate the effect of <SPAN>?
I want the look of it to be on the left and the valid HTML on the right.
Invalid 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">庫函數(shù)</SPAN> </LI> <LI> <SPAN style="color: DarkKhaki">初始化函數(shù)</SPAN> </LI> <LI>用戶定義的函數(shù)</LI> <LI> <SPAN style="color: DodgerBlue">關鍵字</SPAN> </LI> <LI> <SPAN style="color: Red">重要符號</SPAN> </LI> </UL>
Valid 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">庫函數(shù)</SPAN> </LI> <LI> <SPAN style="color: DarkKhaki">初始化函數(shù)</SPAN> </LI> <LI>用戶定義的函數(shù)</LI> <LI> <SPAN style="color: DodgerBlue">關鍵字</SPAN> </LI> <LI> <SPAN style="color: Red">重要符號</SPAN> </LI> </UL> </FIGURE>
You should check the user agent value using development tools
For example, the first element under TD is ul or figure. The standards in Chrome are as follows:
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; }
So if you want to keep figure with ul layout, add figure in your style, override the attributes that break the layout, and add the required attributes.
Just add some styles to reset the default styles.
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">庫函數(shù)</SPAN> </LI> <LI> <SPAN style="color: DarkKhaki">初始化函數(shù)</SPAN> </LI> <LI>用戶定義的函數(shù)</LI> <LI> <SPAN style="color: DodgerBlue">關鍵字</SPAN> </LI> <LI> <SPAN style="color: Red">重要符號</SPAN> </LI> </UL> </FIGURE>