suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Titel umgeschrieben als: Wie richtet man Listenelemente am obigen Text aus?

Mit ungültigem HTML kann ich das gewünschte Aussehen erzielen, aber nicht mit gültigem HTML. Gibt es CSS, mit dem ich <FIGURE> konfigurieren kann, um den Effekt von <SPAN> zu simulieren?

Ich möchte, dass das Erscheinungsbild links und der gültige HTML-Code rechts angezeigt wird.

Ungültiges 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>

Gültiges 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>

P粉463840170P粉463840170472 Tage vor612

Antworte allen(2)Ich werde antworten

  • P粉447785031

    P粉4477850312023-09-10 12:58:12

    您应该使用开发工具检查用户代理值

    例如,TD下的第一个元素是ul或figure。在Chrome中的标准如下:

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

    因此,如果您想保持figure与ul布局,请在您的样式中添加figure,覆盖破坏布局的属性,并添加所需的属性。

    Antwort
    0
  • P粉138871485

    P粉1388714852023-09-10 12:13:31

    只是添加一些样式来重置默认样式。

    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>

    Antwort
    0
  • StornierenAntwort