HTML + CSS：不带句点的有序列表？

  • Z时代
  • 2024-01-10
  • 分类：问答

我认为这个问题的答案是否定的……但是，有谁知道用HTML / CSS的方法来创建有序列表，而数字后面没有句点？或者，还是指定分隔符？

理想情况下，我不想为每个数字使用不同的类来制作列表样式的图像，但是到目前为止，我已经能够想到的就是这一切……这似乎非常语义化。

IE浏览器：

Default Style:
1. ______
2. ______
3. ______
Desired Style:
1  ______
2  ______
3  ______
Alternate Style:
1) ______
2) ______
3) ______

回答：

仅使用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规则，以仅使用常规列表样式的方式针对他们：

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

以上是 HTML + CSS：不带句点的有序列表？ 的全部内容， 来源链接： utcz.com/qa/408795.html

回到顶部