亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Title rewritten as: How to align list items with text above?
P粉463840170
P粉463840170 2023-09-09 15:47:47
0
2
698

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>

P粉463840170
P粉463840170

reply all(2)
P粉447785031

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.

P粉138871485

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>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template