Html 如何隐藏有序列表中项目符号后面的点？

How do you hide the dot after the bullet number in an ordered list?

提问by chimerical

Initially, I thought I could use :first-letter in CSS, legacy browser support aside, but I don't think the bullet numbers technically exist in the DOM. Assume I'm not going to use bullet list images or background images.

最初，我认为我可以在 CSS 中使用 :first-letter ，撇开旧浏览器支持不谈，但我认为技术上不存在 DOM 中的项目符号编号。假设我不打算使用项目符号列表图像或背景图像。

So something like:

所以像：

1. Apples
2. Bananas
3. Oranges

1. 苹果
2. 香蕉
3. 橙子

would become

会成为

  1 Apples
  2 Bananas
  3 Oranges

  1 个苹果
  2 个香蕉
  3 个橙子

回答by Sean Vieira

From this answer, it appears that the answer is:

从这个答案看来，答案是：

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

SEE ALSO: http://jsbin.com/ukojo4/

另见：http: //jsbin.com/ukojo4/

回答by gka

One problem of the solution provided by Sean is that you loose the nice alignment of the numbers.

Sean 提供的解决方案的一个问题是您失去了数字的良好对齐。

Another way to remove the dots is to simply hide them by placing something else above them:

删除点的另一种方法是通过在它们上方放置其他东西来简单地隐藏它们：

ol li:before {
    content: ".";
    color: #fff;        // color it in white (or whatever background you have)
    float: left;
    font-size: 20px;    // make it bigger.
    font-weight: bold;  // and bolder
    position: absolute; 
    left: 18px;         // horizontal offset
    line-height: 13px;  // vertical offset
}

You will probably need to play around with leftand line-heightin order to place the white dots correctly, depending on your actual paddings and margins.

您可能需要使用left和line-height来正确放置白点，具体取决于您的实际填充和边距。

See it in action here http://jsfiddle.net/HGfty/

在这里查看它的实际效果http://jsfiddle.net/HGfty/

回答by Jeff

Here is your answer from another post. I was able to modify the fiddle there to get your answer

这是您在另一篇文章中的回答。我能够修改那里的小提琴以获得你的答案

Custom ordered list format

自定义有序列表格式

EDIT:looks like sean already got to it. +1 for his answer.

编辑：看起来肖恩已经做到了。+1 他的回答。