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

时间：2008-08-14 10:42:32

标签： html css html-lists roman-numerals

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

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的答案。

16 个答案:

答案 0 :(得分：90)

这是我在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>

编辑：strager

包含多行修复
  

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

请参阅list-style-type CSS属性。或者在使用计数器时，第二个参数接受list-style-type值。例如，以下将使用upper roman：

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

答案 1 :(得分：26)

样式列表的CSS是here，但基本上是：

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

然而，您所追求的具体布局可能只能通过使用类似this的内容深入研究布局内部来实现（请注意，我还没有尝试过）：

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

答案 2 :(得分：9)

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

<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) 
ol {
  list-style: none;
}

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

Demo in CodePen with more styling

答案 3 :(得分：8)

从其他答案中偷走了很多这个，但这对我来说在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>

答案 4 :(得分：6)

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

现代浏览器将解释value属性并按预期显示它。参见MDN documentation。

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

还请参阅the <ol> article on MDN，尤其是start和属性的文档。

答案 5 :(得分：5)

我建议使用：before属性，然后看看你能用它实现的目标。这意味着你的代码实际上仅限于漂亮的新浏览器，并且排除了仍然使用垃圾旧浏览器的市场（令人讨厌的大部分），

类似下面的内容，强制修复项目。是的，我知道自己选择宽度并不那么优雅，但使用CSS进行布局就像卧底警察工作：无论你的动机多么好，它总会变得凌乱。

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

但是你必须尝试找到确切的解决方案。

答案 6 :(得分：5)

如果您通过将list-style-type设置为以下内容为数字添加前导零，则数字会更好地排列：

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

答案 7 :(得分：4)

借用并改进Marcus Downing's answer。经测试并可在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. */
}

答案 8 :(得分：2)

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

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

答案 9 :(得分：1)

文档说明list-style-position : outside

  

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

该页面的更多内容是关于标记的内容。

一个例子是：

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

答案 10 :(得分：1)

没有......只需使用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;
}

答案 11 :(得分：0)

我拥有它。请尝试以下方法：

<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是一个非常新的属性。

答案 12 :(得分：0)

快速和污垢替代解决方案。您可以使用制表字符和预先格式化的文本。这是一种可能性：

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

答案 13 :(得分：0)

从概念的角度来看，其他答案更好。但是，您可以使用适当数量的'＆amp; ensp;'左键填充数字。让他们排队。

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

答案 14 :(得分：0)

我会在这里给出我通常不喜欢阅读的那种答案，但我认为，由于还有其他答案告诉你如何实现你想要的东西，重新思考你是不是想要尝试achive确实是一个好主意。

首先，您应该考虑以非标准方式显示项目是否是个好主意，其分隔符不同于提供的。

我不知道原因，但我们假设你有充分的理由。

这里提出的方法包括向标记添加内容，主要是通过CSS：在伪类之前。这个内容真正修改了你的DOM结构，将这些项添加到它中。

当您使用标准的“ol”数字时，您将拥有一个渲染内容，其中“li”文本是可选择的，但它之前的数字是不可选择的。也就是说，标准编号系统似乎比真实内容更“装饰”。如果使用例如那些“：before”方法添加数字内容，则此内容将是可选择的，并且可以执行此操作，执行不期望的vopy / paste问题，或者屏幕阅读器的可访问性问题，此外还将读取此“新”内容到标准的计算系统。

也许另一种方法可能是使用图像来设置数字的样式，尽管这种替代方法会带来其自身的问题（图像被禁用时数字不显示，数字文本大小不变，......）。

无论如何，这个答案的原因不仅仅是提出这种“图像”替代方案，而是让人们思考试图改变有序列表的标准数字系统的后果。

答案 15 :(得分：0)

此代码使编号样式与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>
相关问题
最新问题