57

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

理想情况下，我不想为每个数字使用不同的类来做 list-style-image，但这就是我迄今为止所能想到的……这似乎非常没有语义。

IE：

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

Desired Style:
1  ______
2  ______
3  ______

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

7 回答 7

85

仅使用 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 */
}
于 2011-05-10T04:51:00.177 回答
8

这是解决方案

在 HTML 中编号嵌套的有序列表

你所要做的就是在这里稍微改变一下

ol li:before {
                content: counter(level1) " "; /*Instead of ". " */
                counter-increment: level1;
            }

^^

于 2011-05-10T04:42:05.513 回答
3

我刚刚找到了一种解决方法，可以解决您想要简单地删除点的情况。不是有史以来最好的解决方案，但它只使用 CSS 完成并且适用于每个浏览器。缺点是您需要将 LI 中的文本节点包装到另一个标签（<span> 或其他标签）中。在我自己的例子中，<ol> 被用作链接列表，所以我可以使用我的 <a> 标签！

我使用的 CSS ：

ol li a {
    float: right;
    margin: 8px 0px 0px -13px; /* collapses <a> and dots */
    padding-left: 10px; /* gives back some space between digit and text beginning */
    position: relative; z-index: 10; /* make the <a> appear ABOVE the dots */
    background-color: #333333; /* same background color as my ol ; the dots are now invisible ! */
}
于 2012-03-16T14:14:12.290 回答
2

这可以使用::markerCSS 伪元素来实现，它具有很好的浏览器支持。

但是请注意，Safari 有一个突出的错误来支持该content属性，因此这种方法在那里不起作用。在某些情况下，这可能没问题，因为回退行为只会显示额外的时间段。

ol { counter-reset: my-counter-name; }

li { counter-increment: my-counter-name; }

li::marker { content: counter(my-counter-name); }
于 2021-07-07T14:39:53.247 回答
1

您可以稍后使用 jQuery 添加数字：

$("ul").each(function() {
   $(this).find("li").each(function(index) {
      $(this)
        .css("list-style-type", "none")
        .prepend("<div class='listnumber'>" + (index + 1) + "</div>");
   })
})

试试这里的示例。

更多关于 jQuery的信息在这里。

于 2011-05-10T04:37:35.200 回答
1

上述解决方案对于某些列表都有缺点：多行项目、多位项目编号、自定义背景等。

使用内置list-item计数器而不是自定义计数器更清洁：

ol.dotless {
  list-style-type: none;
  margin-left: 0;
}
ol.dotless > li:before {
  content: counter(list-item) "\A0";
  float: left;
  text-align: right;
  width: 1.5em;
}

但是这种方法不适用于多行项目。

有一种新方法可以让您直接格式化计数器，但到目前为止，它只适用于 Firefox：

ol.dotless {
  list-style: dotless-item
}
@counter-style dotless-item {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: " ";
}

我遇到的唯一适用于所有情况的方法是table模仿 a ol：

table.dotlessol {
  margin: 0.25em 1.25em;
  border-spacing: 0;
  counter-reset: dotless;
}
table.dotlessol tr {
  vertical-align: top;
  counter-increment: dotless;
}
table.dotlessol td {
  padding: 0;
}
table.dotlessol td:first-child {
  text-align: right;
  padding-right: 0.5em;
}
table.dotlessol td:first-child::before {
  content: counter(dotless);
}

td在每行中使用两个s，将第一个td留空，并将项目文本放在第二个s 中td。

于 2020-08-24T10:08:28.733 回答
0

这是最简单的解决方案，在 li 中没有反增量和内联标签：

ol {list-style-position: inside; overflow: hidden; direction: rtl;}
li {position: relative; left: -15px; text-align: left; letter-spacing: 5px;}
于 2019-07-10T19:12:36.457 回答