HTML:如何更改有序列表项目点显示?

时间:2016-08-12 07:26:43

标签: html css3 format html-lists display

我的Get-Job MyJob 文档中有<ol>标记(有序列表)。 我希望它以下列格式显示项目:

HTML

目前我使用以下(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>

是否可以按照我在本期问题开头提到的理想方式显示我的列表?

编辑: 跟进问题,这也是已接受答案的一部分

如何在同一标签行上自动开始新行包裹物品(一行太长的物品)?

1 个答案:

答案 0 :(得分:2)

仅使用CSS3,您可以按以下方式执行此操作:

&#13;
&#13;
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;
  }
&#13;
<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>
&#13;
&#13;
&#13;