HTML: 如何更改有序列表项的标志显示？

Question

我在我的HTML文档中有一个<ol>标签（有序列表）。 我希望它以以下格式显示项目：

(i)    Item 1
(ii)   Item 2
(iii)  Item 3

目前我已经使用以下 HTML 代码使其工作：

<ol type="i">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

这给我以下结果：

i.    Item 1
ii.   Item 2
iii.  Item 3

我能否按照我在问题开头提到的期望方式展示我的列表？

编辑：跟进问题，也是已接受答案的一部分

如何让换行的项目（超过一行的项目）自动在同一制表符行上开始新行？

- Barry Michael Doyle

Answer 1

只需使用 CSS3，您可以按以下方式实现：

ol {
    counter-reset: increment_var;
    list-style-type: none;
}
li:before {
    display: inline-block;
    content: "(" counter(increment_var, lower-roman) ") ";
    counter-increment: increment_var;
    width: 40px;
    margin-left: -40px;
}
li {
  margin-left: 40px;
  }

<ol>
  <li>Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1</li>
  <li>Example 2</li>
  <li>Example 3</li>
  <li>Example 4</li>
  <li>Example 5</li>
</ol>

- NETCreator Hosting - WebDesign

---

谢谢，这非常有帮助 :) - Barry Michael Doyle

请问一下，如果整个内容跨越多行，如何使其整体缩进？ - Barry Michael Doyle

@BarryDoyle 我编辑了我的答案。我给 li 添加了左边距，并给计数器添加了相同但负的左边距。 - NETCreator Hosting - WebDesign

完美！非常感谢 :) - Barry Michael Doyle