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

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

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

IE浏览器：

Default Style:

1. ______

2. ______

3. ______

Desired Style:

1 ______

2 ______

3 ______

Alternate Style:

1) ______

2) ______

3) ______

5个解决方案

81 votes

仅使用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 answered 2020-02-02T04:04:00Z

7 votes

这是解决方案

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

您所要做的就是在此处进行一些更改

ol li:before {

content: counter(level1) " "; /*Instead of ". " */

counter-increment: level1;

}

^^

Hatake Kakashi answered 2020-02-02T04:04:33Z

3 votes

我只是找到了一种解决方法，适用于您只想删除点的情况。 这不是有史以来最好的解决方案，但是仅使用CSS即可完成，并且可以在每种浏览器中使用。 缺点是您需要将LI中的textnode包装到另一个标签(之类)中。 就我自己而言，

1. 用作链接列表，因此我可以使用我的

标记！

我使用的CSS：

ol li a {

float: right;

margin: 8px 0px 0px -13px; /* collapses and dots */

padding-left: 10px; /* gives back some space between digit and text beginning */

position: relative; z-index: 10; /* make the appear ABOVE the dots */

background-color: #333333; /* same background color as my ol ; the dots are now invisible ! */

}

neemzy answered 2020-02-02T04:04:58Z

1 votes

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

$("ul").each(function() {

$(this).find("li").each(function(index) {

$(this)

.css("list-style-type", "none")

.prepend("

");

})

})

在这里尝试示例。

此处提供有关jQuery的更多信息。

ariel answered 2020-02-02T04:05:26Z

0 votes

这是在li内不增加计数和内联标签的最简单解决方案：

ol {list-style-position: inside; overflow: hidden; direction: rtl;}

li {position: relative; left: -15px; text-align: left; letter-spacing: 5px;}

user3051730 answered 2020-02-02T04:05:46Z