blocks|key|1782992|text|样式列表的CSS是here，但基本上是：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1782993|li+{
++++list-style-type:+decimal;
++++list-style-position:+inside;
}|code-block|syntax|javascript|1782994|然而，您想要的特定布局可能只能通过使用this之类的东西深入研究布局的内部才能实现(请注意，我还没有真正尝试过它)：|1782995|ol+{+counter-reset:+item+}
li+{+display:+block+}
li:before+{+content:+counter(item)+")+";+counter-increment:+item+}|1782996|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/REC-CSS2/generate.html#lists|1|http://www.w3.org/TR/REC-CSS2/generate.html#counters^0|9|4|0|0|0|J|4|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|K|3|L|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p>The CSS for styling lists is <a href="http://www.w3.org/TR/REC-CSS2/generate.html#lists" rel="noreferrer">here</a>, but is basically:</p>

<pre class="lang-css prettyprint-override"><code>li {
    list-style-type: decimal;
    list-style-position: inside;
}
</code></pre>

<p>However, the specific layout you're after can probably only be achieved by delving into the innards of the layout with something like <a href="http://www.w3.org/TR/REC-CSS2/generate.html#counters" rel="noreferrer">this</a> (note that I haven't actually tried it):</p>

<pre class="lang-css prettyprint-override"><code>ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
</code></pre>


blocks|key|1783613|text|CSS+:使用value属性(不需要HTML5)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1783614|现代浏览器将解释value属性，并按照您的期望显示它。参见MDN+documentation。|1783615|​|1783616|<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>|code-block|syntax|javascript|1783617|1783618|还可以查看the++article+on+MDN，特别是有关start和属性的文档。|1783619|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attr-value|1|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol|2^0|7|5|0|8|5|T|H|0|0|0|0|0|U|5|5|4|1|9|F|2|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|H|3|I|5|6|7|1B|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1C|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@$9|1H|A|1I|1|1J]|$9|1K|A|1L|1|1M]]|E|$]]|$1|R|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]|Z|$5|U|V|W|E|$X|10]]|11|$5|U|V|W|E|$X|10]]]]

<h1>HTML5: Use the <code>value</code> attribute (no CSS needed)</h1>

<p>Modern browsers will interpret the <code>value</code> attribute and will display it as you expect. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attr-value" rel="noreferrer">MDN documentation</a>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ol&gt;
  &lt;li value="3"&gt;This is item three.&lt;/li&gt;
  &lt;li value="50"&gt;This is item fifty.&lt;/li&gt;
  &lt;li value="100"&gt;This is item one hundred.&lt;/li&gt;
&lt;/ol&gt;</code></pre>
</div>
</div>
</p>

<p>Also have a look at <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol" rel="noreferrer">the <code>&lt;ol&gt;</code> article on MDN</a>, especially the documentation for the <code>start</code> and attribute.</p>


blocks|key|1568531|text|您还可以在HTML中指定自己的号码-例如，如果号码是由数据库提供的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1568532|​|1568533|ol+{
++list-style:+none;
}

ol>li:before+{
++content:+attr(seq)+".+";
}|code-block|syntax|javascript|1568534|<ol>
++<li+seq="1">Item+one</li>
++<li+seq="20">Item+twenty</li>
++<li+seq="300">Item+three+hundred</li>
</ol>|1568535|1568536|使用与其他答案中给出的方法类似的方法使seq属性可见。但是，我们使用content:+attr(seq)而不是content:+counter(foo)。|offset|length|style|CODE|1568537|Demo+in+CodePen+with+more+styling|1568538|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/anon/pen/xGMERG^0|0|0|0|0|0|J|3|Y|I|1J|L|0|0|X|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|16|8|@$N|17|O|18|P|Q]|$N|19|O|1A|P|Q]|$N|1B|O|1C|P|Q]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1D|8|@]|9|@$N|1E|O|1F|1|1G]]|A|$]]|$1|T|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]]]

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>ol {
  list-style: none;
}

ol&gt;li:before {
  content: attr(seq) ". ";
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ol&gt;
  &lt;li seq="1"&gt;Item one&lt;/li&gt;
  &lt;li seq="20"&gt;Item twenty&lt;/li&gt;
  &lt;li seq="300"&gt;Item three hundred&lt;/li&gt;
&lt;/ol&gt;</code></pre>
</div>
</div>
</p>

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

<p><a href="http://codepen.io/anon/pen/xGMERG" rel="nofollow noreferrer">Demo in CodePen with more styling</a></p>


blocks|key|1568263|text|从其他答案中窃取了很多这个，但这对我来说在FF3中是有效的。它有upper-roman，均匀的缩进，一个封闭的括号。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1568264|<!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">

</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>|code-block|syntax|javascript|1568265|entityMap^0|W|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

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

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt; new document &lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!--
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;
}
--&gt;
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;ol&gt;
  &lt;li&gt;One&lt;/li&gt;
  &lt;li&gt;Two&lt;/li&gt;
  &lt;li&gt;Three&lt;/li&gt;
  &lt;li&gt;Four&lt;/li&gt;
  &lt;li&gt;Five&lt;/li&gt;
  &lt;li&gt;Six&lt;/li&gt;
  &lt;li&gt;Seven&lt;/li&gt;
  &lt;li&gt;Eight&lt;/li&gt;
  &lt;li&gt;Nine&lt;/li&gt;
  &lt;li&gt;Ten&lt;/li&gt;
&lt;/ol&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|1783113|text|我建议使用:+seeing属性，看看使用它能实现什么效果。这将意味着你的代码实际上仅限于优秀的新浏览器，并排除了仍在使用垃圾旧浏览器的(令人恼火的)市场部分，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1783114|如下所示，强制对项目进行固定操作。是的，我知道自己选择宽度不那么优雅，但使用CSS进行布局就像卧底警察的工作:无论你的动机有多好，它总是会变得混乱。|1783115|li:before+{
++content:+counter(item)+")+";
++counter-increment:+item;
++display:+marker;
++width:+2em;
}|code-block|syntax|javascript|1783116|但你必须进行实验才能找到确切的解决方案。|1783117|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>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,</p>

<p>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.</p>

<pre><code>li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}
</code></pre>

<p>But you're going to have to experiment to find the exact solution.</p>


blocks|key|1783185|text|如果您将list-style-type设置为将前导零添加到数字，则数字的排列会更好：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1783186|ol+{+list-style-type:+decimal-leading-zero;+}|code-block|syntax|javascript|1783187|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/REC-CSS2/generate.html#propdef-list-style-type^0|4|F|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>The numbers line up better if you add leading-zeroes to the numbers, by setting <a href="http://www.w3.org/TR/REC-CSS2/generate.html#propdef-list-style-type" rel="noreferrer">list-style-type</a> to:</p>

<pre><code>ol { list-style-type: decimal-leading-zero; }
</code></pre>


blocks|key|1783272|text|借用和改进了Marcus+Downing's+answer。在Firefox3和Opera9中测试和工作。也支持多行。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1783273|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+%2B+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.+*/
}|code-block|syntax|javascript|1783274|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/10877/how-can-you-customize-the-numbers-in-an-ordered-list#10887^0|6|N|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Borrowed and improved <a href="https://stackoverflow.com/questions/10877/how-can-you-customize-the-numbers-in-an-ordered-list#10887">Marcus Downing's answer</a>.  Tested and works in Firefox 3 and Opera 9.  Supports multiple lines, too.</p>

<pre class="lang-css prettyprint-override"><code>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. */
}
</code></pre>


blocks|key|1783055|text|Type+attribute允许您更改编号样式，但是您不能更改数字/字母后的句号。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1783056|<ol+type="a">
++++<li>Turn+left+on+Maple+Street</li>
++++<li>Turn+right+on+Clover+Court</li>
</ol>|code-block|syntax|javascript|1783057|entityMap|0|LINK|mutability|MUTABLE|url|http://www.htmlcodetutorial.com/_OL_TYPE.html^0|0|E|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>There is the <a href="http://www.htmlcodetutorial.com/_OL_TYPE.html" rel="nofollow noreferrer">Type attribute</a> which allows you to change the numbering style, however, you cannot change the full stop after the number/letter.</p>

<pre><code>&lt;ol type="a"&gt;
    &lt;li&gt;Turn left on Maple Street&lt;/li&gt;
    &lt;li&gt;Turn right on Clover Court&lt;/li&gt;
&lt;/ol&gt;
</code></pre>


blocks|key|1568356|text|不..。只需使用DL：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1568357|dl+{+overflow:hidden;+}
dt+{
+float:left;
+clear:+left;
+width:4em;+/*+adjust+the+width;+make+sure+the+total+of+both+is+100%25+*/
+text-align:+right
}
dd+{
+float:left;
+width:50%25;+/*+adjust+the+width;+make+sure+the+total+of+both+is+100%25+*/
+margin:+0+0.5em;
}|code-block|syntax|javascript|1568358|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Nope... just use a DL:</p>

<pre><code>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;
}
</code></pre>


blocks|key|1783445|text|我将在这里给出一种我通常不喜欢读的答案，但我认为，由于还有其他答案告诉你如何实现你想要的东西，重新思考一下你试图实现的东西是否真的是一个好主意可能会很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1783446|首先，您应该考虑以非标准的方式显示项目，并使用与所提供的不同的分隔符字符。|1783447|我不知道这样做的原因，但让我们假设你有很好的理由。|1783448|这里提出的实现方法主要是在标记中添加内容，主要是通过CSS+:之前的伪类。这个内容实际上是在修改您的DOM结构，将这些项添加到其中。|1783449|当您使用标准的"ol“计算时，您将拥有一个呈现的内容，其中"li”文本是可选择的，但它前面的数字是不可选择的。也就是说，标准的编号系统似乎更多的是“装饰”而不是真正的内容。如果您使用例如那些":before“方法为数字添加内容，则此内容将是可选择的，并且由于此原因，将执行不希望的vopy/粘贴问题，或屏幕阅读器的可访问性问题，该屏幕阅读器将在标准计数系统之外读取此”新“内容。|1783450|也许另一种方法是使用图像设置数字样式，尽管这种替代方法会带来其自身的问题(禁用图像时不显示数字，不更改数字的文本大小，等等)。|1783451|无论如何，这个答案的原因不只是为了提出这个“图像”替代方案，而是让人们思考试图改变有序列表的标准计数系统的后果。|1783452|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|S|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|T|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|V|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|O|$]]

<p>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.</p>

<p>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.</p>

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

<p>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.</p>

<p>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.</p>

<p>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, ...).</p>

<p>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.</p>


blocks|key|1568588|text|此代码使编号样式与li内容的标题相同。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1568589|<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>|code-block|syntax|javascript|1568590|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This code makes numbering style same as headers of li content.</p>

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

&lt;ol class="list-h4"&gt;
    &lt;li&gt;
        &lt;h4&gt;...&lt;/h4&gt;
        &lt;p&gt;...&lt;/p&gt; 
    &lt;/li&gt;
    &lt;li&gt;...&lt;/li&gt;
&lt;/ol&gt;
</code></pre>


<p>How can I left-align the numbers in an ordered list?</p>

<pre><code>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
</code></pre>

<p>Change the character after the number in an ordered list?</p>

<pre><code>1) an item
</code></pre>

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

<p>I am mostly interested in answers that work on Firefox 3.</p>


How can you customize the numbers in an ordered list?

如何左对齐有序列表中的数字？1.  an item// skip some items for brevity 9.  another item10. notice the 1 is under the 9, and the item contents also line up是否更改有序列表中数字后的字符？1) an item还有一个CSS解决方案，可以将数字更改为字母/罗马列表，而不是使用ol

问如何定制有序列表中的数字？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何定制有序列表中的数字？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何定制有序列表中的数字？
EN