如何定制有序列表中的数字?

html css html-lists roman-numerals

89702 观看

15回复

11564 作者的声誉

如何在有序列表中将数字左对齐?

1.  an item
// skip some items for brevity 
9.  another item
10. notice the 1 is under the 9, and the item contents also line up

在有序列表中的数字后面更改字符?

1) an item

还有一种CSS解决方案,可以从数字更改为字母/罗马列表,而不是在ol元素上使用type属性。

我对Firefox 3上的答案最感兴趣。

作者: grom 的来源 发布者: 2008 年 8 月 14 日

回应 (15)


26

7234 作者的声誉

样式列表的CSS在这里,但基本上是:

li {
    list-style-type: decimal;
    list-style-position: inside;
}

但是,你可能只能通过钻研的东西,如布局的内部结构来实现后是具体布局这个(请注意,我还没有真正尝试过):

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
作者: Marcus Downing 发布者: 14.08.2008 11:01

2

36372 作者的声誉

有一个Type属性,它允许您更改编号样式,但是,不能在数字/字母后更改句号。

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>
作者: GateKiller 发布者: 14.08.2008 11:03

5

7234 作者的声誉

我建议您使用:before属性,并查看可以实现的目标。这意味着您的代码实际上仅限于新的浏览器,并且排除了仍在使用旧的旧浏览器的市场(令人讨厌的)部分,

类似于以下内容的东西,会在项目上强制带有。是的,我知道必须自己选择宽度不太优雅,但是在布局中使用CSS就像是卧底警察工作:无论您的动机如何,它总是很混乱。

li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}

但是您将不得不尝试找到确切的解决方案。

作者: Marcus Downing 发布者: 18.08.2008 02:51

5

15188 作者的声誉

如果通过将list-style-type设置为:在数字前添加零,则数字排列会更好:

ol { list-style-type: decimal-leading-zero; }
作者: Peter Hilton 发布者: 24.08.2008 10:30

93

11564 作者的声誉

决定

这是我在Firefox 3,Opera和Google Chrome中使用的解决方案。该列表仍显示在IE7中(但没有右括号和左对齐数字):

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}
li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>

编辑:包括由斯特拉格的多行修复

还有一种CSS解决方案,可以从数字更改为字母/罗马列表,而不是在ol元素上使用type属性。

请参阅列表样式类型 CSS属性。或者,在使用计数器时,第二个参数接受列表样式类型的值。例如,以下将使用大写罗马字:

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */
作者: grom 发布者: 28.01.2009 06:31

1

30525 作者的声誉

文档说关于 list-style-position: outside

CSS1没有指定标记框的确切位置,并且出于兼容性的考虑,CSS2仍然是模棱两可的。为了更精确地控制标记盒,请使用标记。

在该页面的后面是有关标记的内容。

一个例子是:

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }
作者: Stephen Denne 发布者: 28.01.2009 06:53

0

7234 作者的声誉

我有 请尝试以下操作:

<html>
<head>
<style type='text/css'>

    ol { counter-reset: item; }

    li { display: block; }

    li:before { content: counter(item) ")"; counter-increment: item; 
        display: inline-block; width: 50px; }

</style>
</head>
<body>
<ol>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
</ol>
</body>

问题是,这绝对不能在较旧或不太兼容的浏览器上运行:这display: inline-block是一个非常新的属性。

作者: Marcus Downing 发布者: 28.01.2009 02:49

8

3517 作者的声誉

从其他答案中偷了很多,但这对我来说在FF3中有效。它具有upper-roman,一致的压痕,右括号。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  margin-bottom: .5em;
}
li:before {
  display: inline-block;
  content: counter(item, upper-roman) ")";
  counter-increment: item;
  width: 3em;
}
-->
</style>
</head>

<body>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ol>
</body>
</html>
作者: Steve Perks 发布者: 28.01.2009 03:54

4

75561 作者的声誉

借用并改进了马库斯·唐宁的答案。经过测试并在Firefox 3和Opera 9中运行。也支持多行。

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}

li {
    display: block;
    margin-left: 3.5em;          /* Change with margin-left on li:before.  Must be -li:before::margin-left + li:before::padding-right.  (Causes indention for other lines.) */
}

li:before {
    content: counter(item) ")";  /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
    counter-increment: item;
    display: inline-block;
    text-align: right;
    width: 3em;                  /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example).  Will have to beef up if using roman. */
    padding-right: 0.5em;
    margin-left: -3.5em;         /* See li comments. */
}
作者: strager 发布者: 28.01.2009 08:01

0

2573 作者的声誉

快速而肮脏的替代解决方案。您可以将制表符与预格式化的文本一起使用。这是一种可能性:

<style type="text/css">
ol {
    list-style-position: inside;
}
li:first-letter {
    white-space: pre;
}
</style>

和您的html:

<ol>
<li>    an item</li>
<li>    another item</li>
...
</ol>

请注意,li标记和文本开头之间的空格是制表符(按记事本中的Tab键时得到的内容)。

如果您需要支持较旧的浏览器,则可以执行以下操作:

<style type="text/css">
ol {
    list-style-position: inside;
}
</style>

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>
作者: Marco Luglio 发布者: 01.02.2009 05:02

1

21679 作者的声誉

不...使用DL:

dl { overflow:hidden; }
dt {
 float:left;
 clear: left;
 width:4em; /* adjust the width; make sure the total of both is 100% */
 text-align: right
}
dd {
 float:left;
 width:50%; /* adjust the width; make sure the total of both is 100% */
 margin: 0 0.5em;
}
作者: William Entriken 发布者: 22.11.2011 11:45

0

1080 作者的声誉

从概念的角度来看,其他答案更好。但是,您只需在数字的左边加上适当的数字“&ensp;”即可 使他们排队​​。

*注意:起初我没有意识到正在使用编号列表。我认为该列表已明确生成。

作者: Metro 发布者: 28.11.2011 02:44

0

835 作者的声誉

我会在这里给出我通常不喜欢阅读的答案,但是我认为,由于还有其他答案告诉您如何实现自己想要的东西,因此重新考虑一下您想达到的目标是否真的很不错一个好主意。

首先,您应该考虑以非标准的方式显示项目,并且分隔符与所提供的字符不同,是否是一个好主意。

我不知道原因,但让我们假设您有充分的理由。

这里提出的实现方法包括在标记中添加内容,主要是通过CSS:before伪类。该内容实际上是在修改您的DOM结构,并将这些项目添加到其中。

当使用标准的“ ol”计数时,将具有一个呈现内容,其中“ li”文本是可选的,但其前面的数字则不可选择。也就是说,标准编号系统似乎比实际内容更具“装饰性”。如果您使用例如“:before”方法添加数字内容,则该内容将是可选的,并且由于此原因,屏幕阅读器将发生不希望的vopy / paste问题或可访问性问题,这些阅读器还将读取此“新”内容到标准计算系统。

也许另一种方法是使用图像设置数字样式,尽管这种选择会带来自己的问题(禁用图像时数字不会显示,数字的文字大小不会改变,...)。

无论如何,这个答案的原因不仅在于提出这种“图像”替代方案,还在于使人们思考尝试更改有序列表的标准计数系统的后果。

作者: tomasofen 发布者: 08.02.2014 05:10

10

5204 作者的声誉

您还可以在HTML中指定自己的数字-例如,如果数字是由数据库提供的:

ol {
  list-style: none;
}

ol>li:before {
  content: attr(seq) ". ";
}
<ol>
  <li seq="1">Item one</li>
  <li seq="20">Item twenty</li>
  <li seq="300">Item three hundred</li>
</ol>

seq使用类似于其他答案中给出的方法使该属性可见。但是content: counter(foo)我们使用而不是使用content: attr(seq)

带有更多样式的CodePen演示

作者: z0r 发布者: 05.08.2015 04:53

0

546 作者的声誉

此代码使编号样式与li内容的标题相同。

<style>
    h4 {font-size: 18px}
    ol.list-h4 {counter-reset: item; padding-left:27px}
    ol.list-h4 > li {display: block}
    ol.list-h4 > li::before {display: block; position:absolute;  left:16px;  top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
    ol.list-h4 > li > h4 {padding-top:3px}
</style>

<ol class="list-h4">
    <li>
        <h4>...</h4>
        <p>...</p> 
    </li>
    <li>...</li>
</ol>
作者: Vlad Alivanov 发布者: 27.03.2017 02:52
32x32