How can I align list items with text above?

Issue

Using invalid HTML I get the look I want, but using valid HTML I don’t. Is there CSS that will allow me to configure the <FIGURE> or <FIGCAPTION> to emulate what the <SPAN> is doing?

The way I want it to look is on the left, the valid HTML is 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">Color Code Guide</SPAN>
  <LI>
    <SPAN style="color: DarkCyan">comment</SPAN>
  </LI>
  <LI>
    <SPAN style="color: Coral">processor directive</SPAN>
  </LI>
  <LI>
    <SPAN style="color: HotPink">#ifndef name</SPAN>
  </LI>
  <LI>
    <SPAN style="color: PaleTurquoise">library include</SPAN>
  </LI>
  <LI>
    <SPAN style="color: DarkSalmon">user-defined include</SPAN>
  </LI>
  <LI>
    <SPAN style="color: Gold">library function</SPAN>
  </LI>
  <LI>
    <SPAN style="color: DarkKhaki">initializer function</SPAN>
  </LI>
  <LI>user-defined function</LI>
  <LI>
    <SPAN style="color: DodgerBlue">keyword</SPAN>
  </LI>
  <LI>
    <SPAN style="color: Red">important symbol</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">Color Code Guide</SPAN>
  </FIGCAPTION>
  <UL>
    <LI>
      <SPAN style="color: DarkCyan">comment</SPAN>
    </LI>
    <LI>
      <SPAN style="color: Coral">processor directive</SPAN>
    </LI>
    <LI>
      <SPAN style="color: HotPink">#ifndef name</SPAN>
    </LI>
    <LI>
      <SPAN style="color: PaleTurquoise">library include</SPAN>
    </LI>
    <LI>
      <SPAN style="color: DarkSalmon">user-defined include</SPAN>
    </LI>
    <LI>
      <SPAN style="color: Gold">library function</SPAN>
    </LI>
    <LI>
      <SPAN style="color: DarkKhaki">initializer function</SPAN>
    </LI>
    <LI>user-defined function</LI>
    <LI>
      <SPAN style="color: DodgerBlue">keyword</SPAN>
    </LI>
    <LI>
      <SPAN style="color: Red">important symbol</SPAN>
    </LI>
  </UL>
</FIGURE>

Solution

Just adding some style to reset default style.

ul {
  padding: 0; 
  margin: 0;
  list-style-position: inside;
}
<FIGURE>
  <FIGCAPTION>
    <SPAN style="font-weight: bold; text-decoration: underline; color: lemonchiffon">Color Code Guide</SPAN>
  </FIGCAPTION>
  <UL>
    <LI>
      <SPAN style="color: DarkCyan">comment</SPAN>
    </LI>
    <LI>
      <SPAN style="color: Coral">processor directive</SPAN>
    </LI>
    <LI>
      <SPAN style="color: HotPink">#ifndef name</SPAN>
    </LI>
    <LI>
      <SPAN style="color: PaleTurquoise">library include</SPAN>
    </LI>
    <LI>
      <SPAN style="color: DarkSalmon">user-defined include</SPAN>
    </LI>
    <LI>
      <SPAN style="color: Gold">library function</SPAN>
    </LI>
    <LI>
      <SPAN style="color: DarkKhaki">initializer function</SPAN>
    </LI>
    <LI>user-defined function</LI>
    <LI>
      <SPAN style="color: DodgerBlue">keyword</SPAN>
    </LI>
    <LI>
      <SPAN style="color: Red">important symbol</SPAN>
    </LI>
  </UL>
</FIGURE>

Answered By – Sfili_81

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published