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

巴里·迈克尔·道尔

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

这给了我以下结果:

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

是否可以按照我在此问题开始时提到的期望方式来显示我的列表?

编辑: 跟进问题,这也是公认的答案的一部分

如何获取包装好的项目(对于一行而言太长的项目)以在同一标签行上自动开始新行?

NETCreator托管

仅使用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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将有序列表项目表与数字对齐?

来自分类Dev

使用CSS将项目显示为有序列表

来自分类Dev

使用CSS将项目显示为有序列表

来自分类Dev

我可以使用Razor将多选列表项显示为有序列表吗?

来自分类Dev

HTML有序列表未显示子项正确

来自分类Dev

如何居中HTML中的有序列表编号

来自分类Dev

有序列表项之间的额外换行符

来自分类Dev

呈现为flexbox的有序列表不显示项目符号/小数(项目也呈现为flexbox)

来自分类Dev

如何使用jQuery将具有特定类的有序列表项移动到列表顶部

来自分类Dev

XML到HTML的有序列表

来自分类Dev

HTML列表仅在FIRST列表项上未显示项目符号点

来自分类Dev

如何使列表具有序列功能?

来自分类Dev

如何将无序点排序到顺时针有序列表中?

来自分类Dev

没有显示在有序列表中的列表项中的数字,显示如下:inline-block; 和文本溢出:省略号;

来自分类Dev

如何使用静态字符串为分层有序列表项编号添加前缀

来自分类Dev

如何将项目从VM中的词典放置到有序列表

来自分类Dev

未在预期位置显示的无序列表项目符号

来自分类Dev

如何在有序列表中显示文本和图片?

来自分类Dev

如何编写有序列表并显示存储在数组中的输入条目数

来自分类Dev

如何在HTML中有一个动态的有序列表?

来自分类Dev

如何创建具有不同标题的多个html有序列表(已编辑)

来自分类Dev

微型帖子未显示在ol(有序列表)中

来自分类Dev

在有序列表中显示表格的最佳做法

来自分类Dev

如何仅使用css在html中彩色下罗马有序列表样式?

来自分类Dev

jQuery时间选择器与有序列表项位于同一行

来自分类Dev

进入有序列表

来自分类Dev

jQuery的有序列表

来自分类Dev

与有序列表对齐

来自分类Dev

如何访问有序列表的所有元素

Related 相关文章

  1. 1

    如何将有序列表项目表与数字对齐?

  2. 2

    使用CSS将项目显示为有序列表

  3. 3

    使用CSS将项目显示为有序列表

  4. 4

    我可以使用Razor将多选列表项显示为有序列表吗?

  5. 5

    HTML有序列表未显示子项正确

  6. 6

    如何居中HTML中的有序列表编号

  7. 7

    有序列表项之间的额外换行符

  8. 8

    呈现为flexbox的有序列表不显示项目符号/小数(项目也呈现为flexbox)

  9. 9

    如何使用jQuery将具有特定类的有序列表项移动到列表顶部

  10. 10

    XML到HTML的有序列表

  11. 11

    HTML列表仅在FIRST列表项上未显示项目符号点

  12. 12

    如何使列表具有序列功能?

  13. 13

    如何将无序点排序到顺时针有序列表中?

  14. 14

    没有显示在有序列表中的列表项中的数字,显示如下:inline-block; 和文本溢出:省略号;

  15. 15

    如何使用静态字符串为分层有序列表项编号添加前缀

  16. 16

    如何将项目从VM中的词典放置到有序列表

  17. 17

    未在预期位置显示的无序列表项目符号

  18. 18

    如何在有序列表中显示文本和图片?

  19. 19

    如何编写有序列表并显示存储在数组中的输入条目数

  20. 20

    如何在HTML中有一个动态的有序列表?

  21. 21

    如何创建具有不同标题的多个html有序列表(已编辑)

  22. 22

    微型帖子未显示在ol(有序列表)中

  23. 23

    在有序列表中显示表格的最佳做法

  24. 24

    如何仅使用css在html中彩色下罗马有序列表样式?

  25. 25

    jQuery时间选择器与有序列表项位于同一行

  26. 26

    进入有序列表

  27. 27

    jQuery的有序列表

  28. 28

    与有序列表对齐

  29. 29

    如何访问有序列表的所有元素

热门标签

归档