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

How can I left-align the numbers in an ordered list?

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

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

Change the character after the number in an ordered list?

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

1) an item

Also is there a CSS solution to change from numbers to alphabetic/roman lists instead of using the type attribute on the ol element.

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

I am mostly interested in answers that work on Firefox 3.

我最感兴趣的是关于Firefox 3的答案。

16 个解决方案

#1

This is the solution I have working in Firefox 3, Opera and Google Chrome. The list still displays in IE7 (but without the close bracket and left align numbers):

这是我在Firefox 3、Opera和谷歌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>

EDIT: Included multiple line fix by strager

编辑:包含由strager进行的多行修改

Also is there a CSS solution to change from numbers to alphabetic/roman lists instead of using the type attribute on the ol element.

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

Refer to list-style-type CSS property. Or when using counters the second argument accepts a list-style-type value. For example the following will use upper roman:

请参阅列表样式类型的CSS属性。或者当使用计数器时，第二个参数接受列表样式类型的值。例如，下面将使用上罗马字母:

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */

#2

I think this is an answer that satisfies your requirements:

我认为这个答案符合您的要求:

li { 
  list-style-position: inside;
  margin-bottom: .5em;
}
li span {
  float: left;
  margin-left: 2em;
  margin-top: -1.25em;
}

<ol start="8">
  <li><span>Item</span></li>
  <li><span>Item</span></li>
  <li><span>Item</span></li>
  <li><span>Item</span></li>
</ol>

#3

The CSS for styling lists is here, but is basically:

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

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

However, the specific layout you're after can probably only be achieved by delving into the innards of the layout with something like this (note that I haven't actually tried it):

但是，您所追求的特定布局可能只能通过以下方式深入布局的内部结构来实现(请注意，我实际上还没有尝试过):

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }

#4

Stole a lot of this from other answers, but this is working in FF3 for me. It has upper-roman, uniform indenting, a close bracket.

从其他答案中剽窃了很多，但这对我来说在FF3中是有效的。它有上罗马的，均匀的缩进，一个右括号。

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

#5

You can also specify your own numbers in the HTML - e.g. if the numbers are being provided by a database:

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

<ol>
  <li seq="1">Item one</li>
  <li seq="20">Item twenty</li>
  <li seq="300">Item three hundred</li>
</ol>

The seq attribute is made visible using a method similar to that given in other answers. But instead of using content: counter(foo), we use content: attr(seq):

seq属性可以使用与其他答案相似的方法来显示。但是我们使用的不是content: counter(foo)，而是content: attr(seq):

ol {
  list-style: none;
}

ol > li:before {
  content: attr(seq) ". ";
}

Demo in CodePen with more styling

在CodePen的演示更多的风格。

#6

I suggest playing with the :before attribute and seeing what you can achieve with it. It will mean your code really is limited to nice new browsers, and excludes the (annoyingly large) section of the market still using rubbish old browsers,

我建议使用:before属性，看看您可以使用它实现什么。它将意味着你的代码真的仅限于漂亮的新浏览器，并且排除了仍然使用垃圾旧浏览器的市场(恼人的大)部分，

Something like the following, which forces a fixed with on the items. Yes, I know it's less elegant to have to choose the width yourself, but using CSS for your layout is like undercover police work: however good your motives, it always gets messy.

如下图所示，它强制将一个固定在项目上。是的，我知道你自己选择宽度不那么优雅，但是你的布局使用CSS就像便衣警察一样:不管你的动机如何，它总是会变得混乱。

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

But you're going to have to experiment to find the exact solution.

但是你要做实验才能找到准确的解。

#7

The numbers line up better if you add leading-zeroes to the numbers, by setting list-style-type to:

如果在数字中加入前导零，通过将list-style-type设置为:

ol { list-style-type: decimal-leading-zero; }

#8

Borrowed and improved Marcus Downing's answer. Tested and works in Firefox 3 and Opera 9. Supports multiple lines, too.

借用并改进了马库斯·唐宁的答案。在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. */
}

#9

There is the Type attribute which allows you to change the numbering style, however, you cannot change the full stop after the number/letter.

类型属性允许您更改编号样式，但是不能在数字/字母之后更改句号。

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>

#10

The docs say regarding list-style-position: outside

关于清单风格的位置，医生说:在外面

CSS1 did not specify the precise location of the marker box and for reasons of compatibility, CSS2 remains equally ambiguous. For more precise control of marker boxes, please use markers.

CSS1没有指定标记框的精确位置，出于兼容性的原因，CSS2仍然同样模棱两可。为了更精确地控制标记盒，请使用标记。

Further up that page is the stuff about markers.

再往上是关于标记的东西。

One example is:

一个例子是:

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }

#11

Nope... just use a DL:

不…只使用一个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;
}

#12

I have it. Try the following:

我有它。试试以下:

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

The catch is that this definitely won't work on older or less compliant browsers: display: inline-block is a very new property.

问题是，这在旧的或不太兼容的浏览器上肯定行不通:display: inline-block是一个非常新的属性。

#13

Quick and dirt alternative solution. You can use a tabulation character along with preformatted text. Here's a possibility:

快速污垢替代方案。您可以使用一个表格字符和预格式化的文本。这里有一个可能性:

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

and your html:

html:

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

Note that the space between the li tag and the beggining of the text is a tabulation character (what you get when you press the tab key inside notepad).

请注意，li标签和文本的“请求”之间的空间是一个列表字符(当您按下记事本中的tab键时得到的内容)。

If you need to support older browsers, you can do this instead:

如果您需要支持旧的浏览器，您可以这样做:

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

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

#14

The other answers are better from a conceptual point of view. However, you can just left-pad the numbers with the appropriate number of '&ensp;' to make them line up.

从概念的角度来看，其他的答案更好。但是，你可以在数字的左边加上适当的“&ensp”，使它们排成一行。

* Note: I did not at first recognize that a numbered list was being used. I thought the list was being explicitly generated.

*注:一开始我没有注意到使用了编号列表。我以为列表是显式生成的。

#15

I will give here the kind of answer i usually don't like to read, but i think that as there are other answers telling you how to achive what you want, it could be nice to rethink if what you are trying to achive is really a good idea.

我会在这里给出我通常不喜欢读的答案，但我认为，当有其他的答案告诉你如何实现你想要的东西时，如果你想要的是一个好主意，那么重新思考一下是很不错的。

First, you should think if it is a good idea to show the items in a non-standard way, with a separator charater diferent than the provided.

首先，您应该考虑是否应该以非标准的方式显示项目，并使用与提供的分隔符不同的分隔符。

I don't know the reasons for that, but let's suppose you have good reasons.

我不知道原因，但假设你有很好的理由。

The ways propossed here to achive that consist in add content to your markup, mainly trough the CSS :before pseudoclass. This content is really modifing your DOM structure, adding those items to it.

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

When you use standard "ol" numeration, you will have a rendered content in which the "li" text is selectable, but the number preceding it is not selectable. That is, the standard numbering system seems to be more "decoration" than real content. If you add content for numbers using for example those ":before" methods, this content will be selectable, and dued to this, performing undesired vopy/paste issues, or accesibility issues with screen readers that will read this "new" content in addition to the standard numeration system.

当您使用标准的“ol”数字时，您将会得到一个呈现的内容，其中“li”文本是可选择的，但是前面的数字是不可选的。也就是说，标准的编号系统似乎更多的是“装饰”而不是真正的内容。如果您为数字添加内容，例如使用“:before”方法，那么该内容将是可选择的，并与之竞争，执行不希望的复制/粘贴问题，或屏幕阅读器的可接受性问题，这些阅读器将在标准的数字识别系统之外阅读这个“新”内容。

Perhaps another approach could be to style the numbers using images, although this alternative will bring its own problems (numbers not shown when images are disabled, text size for number not changing, ...).

也许另一种方法是使用图像对数字进行样式化，尽管这种方法会带来它自己的问题(当图像被禁用时没有显示数字，数字的文本大小不变，…)

Anyway, the reason for this answer is not just to propose this "images" alternative, but to make people think in the consequences of trying to change the standard numeration system for ordered lists.

不管怎样，这个答案的原因不仅仅是提出这个“图像”替代方案，而是让人们思考改变有序列表的标准计数系统的后果。

#16

This code makes numbering style same as headers of li content.

此代码使编号样式与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>

#1