Tajuk ditulis semula sebagai: Bagaimana untuk menyelaraskan item senarai dengan teks di atas?

Question

Dengan HTML yang tidak sah saya boleh mendapatkan rupa yang saya inginkan, tetapi tidak dengan HTML yang sah. Adakah terdapat CSS yang membolehkan saya mengkonfigurasi <FIGURE> atau <FIGCAPTION> untuk mensimulasikan kesan <SPAN>?

Saya mahu rupanya berada di sebelah kiri dan HTML yang sah di sebelah kanan.

HTML tidak sah:

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 yang sah:

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>

Answer 1

Anda harus menyemak nilai ejen pengguna menggunakan alat dev

Sebagai contoh, elemen pertama di bawah TD ialah ul atau angka. Piawaian dalam Chrome adalah seperti berikut:

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;
}

Jadi, jika anda ingin mengekalkan reka letak angka vs. ul, tambahkan angka dalam gaya anda, ganti atribut yang memecahkan reka letak dan tambahkan atribut yang diperlukan.

Answer 2

Hanya tambah beberapa gaya untuk menetapkan semula gaya lalai.

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>