你怎么可以自定义有序列表中的数字？你怎么可以自定义有序列表中的数字？(How can you cus

2019-05-17 06:47发布

站内文章 / 前沿技术

76 0

聊天终结者

女 | 书童

私信

在一个有序列表我怎样才能左对齐的数字？

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溶液从号码改变到字母/罗马列表，而不是使用醇元件上的类型属性。

我在Firefox 3上运行的答案最感兴趣。

Answer 1:

这是我已经在Firefox 3，Opera和谷歌浏览器工作的解决方案。该列表还显示在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溶液从号码改变到字母/罗马列表，而不是使用醇元件上的类型属性。

请参阅列表样式类型 CSS属性。或者使用计数器时第二个参数接受一个列表样式类型值。例如，下面将使用大写罗马：

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

Answer 2:

对于样式列表中的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 }

Answer 3:

您也可以在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) ". ";
}

演示中CodePen更多造型

Answer 4:

偷其他答案了很多本，但这是工作在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>

Answer 5:

我建议玩的：属性之前，看到什么，你可以用它实现。这将意味着你的代码确实是有限的，以漂亮的新的浏览器，并排除市场仍然使用旧的垃圾浏览器（烦人大）部分，

像下面，这迫使一个固定的项目。是的，我知道这是那么优雅有自己选择的宽度，但使用CSS布局就像是卧底警察的工作：但是好你的动机，它总是会混乱。

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

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

Answer 6:

数字排队更好，如果你添加领先零的数字，通过设置列表样式类型到：

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

Answer 7:

借来的和改进的马库斯·唐宁的答案。经过测试，在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. */
}

Answer 8:

还有就是类型的属性，它允许您更改编号样式，但是，你不能在数字/字母后更改句号。

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

Answer 9:

该文件说关于list-style-position : outside

CSS1没有指定标记框的确切位置和兼容性的考虑，CSS2保持同样模棱两可。对于标记盒更精确的控制，请使用标记。

而且在该网页是关于标记的东西。

一个例子是：

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

Answer 10:

都能跟得上...只是使用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;
}

Answer 11:

我有它。尝试以下方法：

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

Answer 12:

快速和污垢替代解决方案。您可以使用预格式化文本一起使用制表符。这里有一个可能性：

<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标签和文字的beggining是制表符（当您按下里面的记事本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>

Answer 13:

其他答案是从概念的角度来看更好。但是，你可以左垫适当数量的数字“＆ensp;” 让他们排队。

*注：我起先不承认，目前正在使用的编号列表。我想到的是明确地生成的列表。

Answer 14:

我会在这里给我通常不喜欢读这样回答的，但我认为，还有其他的答案告诉你如何才达到你想要的东西，它可能是不错的重新思考，如果你正在尝试才达到真的一个好主意。

首先，你应该想想，如果它是显示在一个非标准的方式的项目，与分离系统字符diferent比提供了一个不错的主意。

我不知道原因是什么，但是让我们假设你有很好的理由。

这里propossed才达到的是在于将内容添加到您的标记方式，主要线槽CSS：伪类前。此内容是真的对矫正你的DOM结构，增加这些项目给它。

当您使用标准的“OL”记数，你将有一个呈现的内容中，“丽”文字是可选的，但它前面的数字是不可选。也就是说，标准的编号系统似乎更加“装修”不是真正的内容。如果您使用例如这些号码添加内容“：之前”的方法，此内容将是可选择的，并且dued此，执行不需要vopy /粘贴问题，或无障碍环境问题与屏幕阅读器将读取除了这个“新”内容该标准的记数系统。

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

不管怎么说，这个答案的原因不只是提出这种“图像”的选择，但让人们认为在试图改变有序列表的标准记数系统的后果。

Answer 15:

此代码编号样式相同的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>

文章来源: How can you customize the numbers in an ordered list?