Question

我想创建一个如下所示的有序列表。我感谢您的帮助。

我们首先收集以下设备：

设备1：驾驶执照。

设备2：信用卡。

设备3：笔记本电脑。

设备4：......

然后我们按照以下步骤检查汽车：

步骤1：检查车下是否有明显的泄漏。使用泄漏液驱动可能会导致转向，制动器或散热器失效。

步骤2：检查轮胎是否有适当的充气和任何明显的损坏或过度磨损的迹象。

步骤3：让别人站在你的车后检查灯。

第4步：......

Answer 1

您需要做的就是建立一个这样的有序列表：

HTML：

    <ol>
      <li>Step 1: Check under the car for obvious leaks. Driving with leaking fluid may cause failure of the steering, brakes or radiator.</li>
      <li>Step 2: Check the tires for proper inflation and any obvious damage or signs of excessive wear.</li>
      <li>Step 3: Ask someone to stand behind your car to check the lights.</li>
      <li>Step 4: ...</li>
    </ol>

CSS：

ol {
  list-style-type: none;
  }

但请确保在您添加<head></head>属性的CSS中（无论是list-style-type: none部分中的样式标记还是单独的样式表），因为这会删除您的数字列表。

Answer 2

试一试

＆＃13;

ol.step {
  margin-left: 0;
  counter-reset: list 0;
}

ol.step > li {
  list-style: none;
}

ol.step > li:before {
  counter-increment: list;
  content: "Step " counter(list) ": ";
  float: left;
  width: 3.5em;
}

ol.equipment {
  margin-left: 0;
  counter-reset: equipment 0;
}

ol.equipment > li {
  list-style: none;
}

ol.equipment > li:before {
  counter-increment: equipment;
  content: "Equipment " counter(equipment) ": ";
  float: left;
  width: 6em;
}

＆＃13;

<h2>List 1</h2>
<ol class="equipment">
  <li>Driver's license.</li>
  <li>Credit card.</li>
  <li>Laptop.</li>
</ol>
<h2>List 2</h2>
<ol class="step">
  <li>I would like to create an ordered list like the one below. I appreciate your help.</li>
  <li>Check under the car for obvious leaks. Driving with leaking fluid may cause failure of the steering, brakes or radiator.</li>
  <li>Check the tires for proper inflation and any obvious damage or signs of excessive wear.</li>
  <li>Ask someone to stand behind your car to check the lights.</li>
</ol>

＆＃13;

https://jsfiddle.net/3z7y7vjr/5/

如何使用不同的标题创建多个html有序列表（已编辑）

2 个答案: