HTML + CSS：如何去掉有序列表中的句点？

Question

我认为这个问题的答案是否定的……但是有没有人知道创建一个无序列表却不在数字后面加点号或指定其他分隔符的HTML/CSS方法？或者说，有没有其他方式可以实现这个效果？

理想情况下，我不想用不同类别的list-style-image来实现每个数字，但这是我目前想到的唯一方法...... 这似乎非常不语义化。

例如：

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

Desired Style:
1  ______
2  ______
3  ______

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

- Andrew

---

看起来你在句号上遇到了问题 :) 我认为唯一的方法是使用<ul>自己构建列表。 - morgar

Answer 1

使用仅限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 */
}

- Chris

---

就我所知，直到我把counter-increment移到了li本身，它才能正常工作。不知道为什么...否则这很棒，谢谢！ - Andrew

这似乎只适用于 list-style-position: inside。有没有帮助让它适用于 list-style-position: outside？ - Christof

这种方法使用伪元素，因此任何CSS属性来影响列表样式-- list-style-position，list-style-type等-- 将不起作用。你需要样式化::before伪元素。 - Chris

为了使多行列表项正常工作，请添加以下CSS。 ol.custom>li { display: table-row } ol.custom>li:before { display: table-cell } - Gavin Bruce

忽略那些使用IE6和7的人，他们已经习惯了互联网的不稳定性，如果你的网站能够正常工作，他们会感到困惑。 - Andrew

Answer 2

以下是解决方案

如何在HTML中为嵌套有序列表编号

您只需要在这里做一些小改动即可

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

^^

- Kent

---

+1，这是纯CSS的唯一方法，但不幸的是我不相信它得到了很好的支持（尚未）。编辑： 我改变了看法，根据那个链接，它在所有当前浏览器中都可以工作。 - Matthew Scharley

有什么想法如何添加前导零吗？ - yckart

@yckart 这是几年迟到的回复，但如果它能帮助到某个人，请参见 https://jsfiddle.net/a3L6e24s/ 在 li::before 的规则中，您可以设置 content: "0" counter(mycounter) " "; 然后设置 ol.leading0 li:nth-of-type(9)~li::before {content: counter(mycounter) " ";}。如果需要支持 IE8，则可以将选择器设置为 ol.leading0ie8 li + li + li + li + li + li + li + li + li ~ li:before。 - Jacob C.

@JacobC。哇！非常感谢您回答这个五年前的问题并支持IE8 :-) - yckart

Answer 3

这可以通过使用::marker CSS 伪元素来实现，该伪元素在浏览器上得到了良好的支持。

但需要注意的是，Safari存在一个未解决的错误，不支持content属性，因此在那里无法使用此方法。在某些情况下，这可能还可以接受，因为备用行为只会显示额外的句点。

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

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

li::marker { content: counter(my-counter-name); }

- mark.monteiro

---

一个非常出色的最新答案。（尽管我期待 ::marker 能够理解比目前有限的子集更多的 CSS 属性。） - Rounin

这个应该添加到一个类中。将计数器添加到标签本身将会增加页面上所有<ol>元素中的数字。 - Marcio Duarte

Answer 4

您可以通过为计数器样式指定一个空后缀来使用CSS去除点号：

@counter-style empty-style {
  system: extends decimal;
  suffix: ' ';
}

ol {
  list-style: empty-style;
}

你可以使用伪元素::marker进一步样式化数字。

请注意，这种技术在Safari（任何版本）或旧版Edge中完全不受支持。但是，幸运的是，在这些浏览器中它会优雅地降级，没有问题地呈现默认的点。

因此，这是一个很好的渐进增强。

- Marcio Duarte

Answer 5

我刚刚找到了一种解决方案，可以简单地删除点。虽然不是最好的解决方案，但它只使用 CSS 并在每个浏览器中都有效。缺点是需要将 LI 中的 textnode 包装到另一个标签 (比如 <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 ! */
}

- neemzy

---

有趣的方法，谢谢。回答旧帖没问题，有时你会添加非常有用的信息。 - Andrew

只有在背景是单色的情况下才能正常工作。 - Flimm

Answer 6

以上解决方案都存在一些缺陷：多行项目、多位数的项目编号、自定义背景等。

更清晰的做法是使用内置的 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: " ";
}

我遇到过的唯一适用于所有情形的方法是使用类似于ol的table：

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 标签，第一个 td 留空，把项目文本放在第二个 td 中。

- Kevin Carmody

---

“@counter-style” 方法正是我所需要的，谢谢！此外，添加 “@counter-style dotless-item { system: extends decimal; suffix: ' '; }” 也可以达到同样的效果，去掉了点。不过，这种技术在 Safari 或旧版 Edge 中不受支持，但在这两个浏览器中会优雅地降级，显示出点来。 - Marcio Duarte

Answer 7

您可以先移除标记并替换为before元素，以获得更好的浏览器支持，然后使用内置的list-item计数器。

ol {
    list-style: none;
}
li::before {
    content: counter(list-item);
}

期望结果：

  1 item 
  2 item 
  3 item 

编辑

<li> 应该具有 display:list-item;，这是默认值。

- HITO

Answer 8

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

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

在这里尝试示例here。

有关jQuery的更多信息here。

- ariel

Answer 9

这是最简单的解决方案，不需要使用counter-increment和li内联标签：

ol {list-style-position: inside; overflow: hidden; direction: rtl;}
li {position: relative; left: -15px; text-align: left; letter-spacing: 5px;}

- user3051730