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

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

#### 16 个答案:

``````ol {
counter-reset: item;
margin-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>``````

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

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

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

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

``````ol {
list-style: none;
}

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

``````<!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">
<title> new document </title>
<style type="text/css">
<!--
ol {
counter-reset: item;
margin-left: 0;
}
li {
margin-bottom: .5em;
}
li:before {
display: inline-block;
content: counter(item, upper-roman) ")";
counter-increment: item;
width: 3em;
}
-->
</style>

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

# HTML5：使用`value`属性（无需CSS）

``````<ol>
<li value="3">This is item three.</li>
<li value="50">This is item fifty.</li>
<li value="100">This is item one hundred.</li>
</ol>``````

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

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

``````ol {
counter-reset: item;
margin-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. */
margin-left: -3.5em;         /* See li comments. */
}
``````

Type attribute允许您更改编号样式，但是，您无法在数字/字母后更改句号。

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

CSS1没有指定标记框的精确位置，并且出于兼容性原因，CSS2仍然同样含糊不清。为了更精确地控制标记盒，请使用标记。

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

``````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;
}
``````

* 注意：我最初没有认识到正在使用编号列表。我以为列表是明确生成的。

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

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

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

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

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

``````<style>
h4 {font-size: 18px}
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>
``````