HTML + CSS：没有句点的有序列表？ [英] HTML + CSS: Ordered List without the Period?

问题描述

我认为这个问题的答案是没有...但是有没有人知道一个HTML / CSS的方式来创建一个有序数组之后没有句点的有序列表？或者，要指定分隔符吗？

I think the answer to this question is no... but does anyone know of a an HTML/CSS way to create an ordered list without a period after the numbers? Or, alternatively, to specify the separator character?

理想情况下，我不想对每个数字使用不同的类做list-style-image，已经能够想到这么远...这似乎是非常不受欢迎的。

Ideally I don't want to do list-style-image with a different class for each number, but that's all I've been able to think of so far... That seems terribly unsemantic.

IE：

Default Style:
1. ______
2. ______
3. ______

Desired Style:
1  ______
2  ______
3  ______

Alternate Style:
1) ______
2) ______
3) ______

推荐答案

这是完全可能的CSS（2.1）：

This is perfectly possible to do with just CSS (2.1):

ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}

请记住，此解决方案依赖于：before伪选择器，因此一些旧的浏览器（特别是IE6和IE7）不会呈现生成的数字。对于这些浏览器，您需要添加一个额外的CSS规则，只使用正常的列表样式：

Keep in mind that this solution relies on the :before pseudo-selector, so some older browsers -- IE6 and IE7 in particular -- won't render the generated numbers. For those browsers, you'll want to add an extra CSS rule that targets just them to use the normal list-style:

ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}

这篇关于HTML + CSS：没有句点的有序列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！