HTML 嵌套列表。十进制列表只打印数字 1答案

【问题标题】：Html nested list. Decimal list only prints number 1HTML 嵌套列表。十进制列表只打印数字 1
【发布时间】：2023-02-05 04:17:23
【问题描述】：

在下面的代码中，如何使十进制列表从 1 变为 2。无法弄清楚，也许我对标签做错了什么。请检查下面的代码。结果只打印数字 1

div {
  background-color: white;
  width: 300px;
  border: 2px solid red;
  padding: 20px;
  margin: 10px;
}
ul.a {list-style-type: disc;}
ol.f {list-style-type: decimal;}
ol.u {list-style-type: upper-roman;}
ol.t {list-style-type: upper-latin;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}

<div>
<font size="6"
          face="arial"
          color="light blue">
          Aircraft Types
    </font>
<ul class="a">
  <li>General Aviation (piston-driven engines)</li>
      <ol class="f">
        <li>Single-Engine Aircraft</li>
      </ol>
      <ul>
        <ol class="u">
        <li>Tail wheel</li>
        <li>Tricycle</li>
        </ol>
      </ul>
      <ol class="f">
        <li>Dual-Engine Aircraft</li>
      </ol>
      <ul>
      <ol class="t">
        <li>Wing-mounted engines</li>
        <li>Push-pull fuselage-mounted engines</li>
      </ol>
      <ul>
      </ul>
      </ul>

</ul>
<ul class="a">
    <li>Commercial Aviation (jet engines)</li>
      <ol class="f">
        <li>Dual Engine</li>
      </ol>
      <ul>
      <ol class="p">
        <li>Wing-mounted engines</li>
        <li>Fuselage-mounted engines</li>
      </ol>
      </ul>
      <ol class="f">
        <li>Tri-Engine</li>
      </ol>
      <ul>
      <ol class="q">
        <li>Third engine in vertical stabilizer</li>
        <li>Third engine in fuselage</li>
      </ol>
      </ul>
</ul>
</div>

我尝试移出标签，但我无法弄清楚。我想让十进制数按升序排列。我的代码只为他们显示 1

【问题讨论】：

<ul> 和<ol> 的唯一有效孩子是<li>。

标签： html css

【解决方案1】：

请在下面找到具有预期结果的更正代码：

div {
  background-color: white;
  width: 300px;
  border: 2px solid red;
  padding: 20px;
  margin: 10px;
}

ul.a {
  list-style-type: disc;
}

ol.f {
  list-style-type: decimal;
}

ol.u {
  list-style-type: upper-roman;
}

ol.t {
  list-style-type: upper-latin;
}

ol.p {
  list-style-type: lower-latin;
}

ol.q {
  list-style-type: lower-roman;
}

<!DOCTYPE html>

<head>
  <link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
  <div>
    <font size="6" face="arial" color="light blue">
      Aircraft Types
    </font>
    <ul class="a">
      <li>General Aviation (piston-driven engines)</li>
      <ol>
        <li>Single-Engine Aircraft</li>
        <ol class="u">
          <li>Tail wheel</li>
          <li>Tricycle</li>
        </ol>

        <li>Dual-Engine Aircraft</li>
        <ol class="t">
          <li>Wing-mounted engines</li>
          <li>Push-pull fuselage-mounted engines</li>
        </ol>
      </ol>
    </ul>
    <ul class="a">
      <li>Commercial Aviation (jet engines)</li>
      <ol>
        <li>Dual Engine</li>
        <ol class="p">
          <li>Wing-mounted engines</li>
          <li>Fuselage-mounted engines</li>
        </ol>
        <li>Tri-Engine</li>
        <ol class="q">
          <li>Third engine in vertical stabilizer</li>
          <li>Third engine in fuselage</li>
        </ol>
      </ol>
    </ul>
  </div>
</body>

【讨论】：